无法将图片从Reactjs前端上传到FastApi

import React, { useState } from 'react';
import axios from 'axios';

function FileUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append('file', selectedFile);

    // 发送请求
    axios.post('/api/upload', formData)
      .then(response => {
        // 处理上传成功的逻辑
      })
      .catch(error => {
        // 处理上传失败的逻辑
      });
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
}

export default FileUpload;

from fastapi import FastAPI, UploadFile

app = FastAPI()

@app.post("/api/upload")
async def upload_file(file: UploadFile = File(...)):
    # 保存文件到本地或云存储
    contents = await file.read()
    # 处理上传后的逻辑，比如保存文件、生成URL等

    return {"filename": file.filename}