使用 FastAPI 和 JS fetch 上传 .csv

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 成功执行post 请求，如下所示：

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

我最终确实解决了这个问题。Isabi 的回答对我有帮助，学习FormData 的追加方法也对我有帮助。以下是工作代码片段，以防有人发现它们有用。

  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