Загрузите .csv с FastAPI и 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 like так:

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

Убедитесь, что имя файла в форме совпадает с именем файла в параметре!

См. Мой ответ на тот же вопрос ниже.

Как сделать отправить файл на конечную точку fastapi с помощью почтальона

Answer 2

В конце концов я решил эту проблему. Ответ Исаби помог мне, как и изучение метода добавления 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

Answer 3

Установите заголовок Content-Type на 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',
      }
    });
  };