Upload.csv with FastAPI and JS fetch

Question

我的应用在前端使用 React，在后端使用 FastAPI。

我正在尝试将 csv 文件上传到我的服务器。

在提交表单时，这会被调用：

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);
    fetch("/api/textitems/upload", {
      method: "POST",
      body: formData,
    });
  };

数据通过以下方式接收：

@app.post('/api/textitems/upload')
def upload_file(csv_file: UploadFile = File(...)):
    dataframe = pd.read_csv(csv_file.file)
    return dataframe.head()

我不断收到INFO: 127.0.0.1:0 - "POST /api/textitems/upload HTTP/1.1" 422 Unprocessable Entity错误。

我能够像这样使用 curl 成功执行发布请求：

curl -X POST "http://localhost:8000/api/textitems/upload" -H "accept: application/json" -H "Content-Type: multipart/form-data" -F "csv_file=@exp_prod.csv;type=text/csv"

关于使用 Javascript 时我哪里出错了有什么建议吗？

Answer 1

确保表单中的文件名与参数中的文件名匹配！

请参阅下面我对同一问题的回答。

如何使用 postman 将文件发送到 fastapi 端点

Answer 2

我最终解决了这个问题。 Isabi 的回答对我有所帮助，正如了解FormData 的 append 方法一样。 以下是工作代码片段，以防有人发现它们有用。

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file, file.name);
    await fetch(`/api/textitems/upload`, {
      method: "POST",
      body: formData,
    })

@app.post('/api/textitems/upload')
def upload_file(file: UploadFile = File(...), db: Session = Depends(get_db)):
    df = pd.read_csv(file.file).head()
    return df

Answer 3

根据您的请求将 Content-Type header 设置为multipart/form-data ：

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);
    fetch("/api/textitems/upload", {
      method: "POST",
      body: formData,
      headers: {
          'Content-Type': 'multipart/form-data',
      }
    });
  };