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',
      }
    });
  };