使用 FastAPI 和 JS 提取上传 .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

根据您的要求将 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',
      }
    });
  };

Answer 2

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

在下面查看我对同一问题的回答。

Answer 3

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

  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

使用 FastAPI 和 JS 提取上传 .csv

Upload .csv with FastAPI and JS fetch

javascript

python

csv

reactjs

fastapi