使用FastAPI和JS fetch上传.csv

p1tboqfb 于 2023-11-14 发布在其他

关注(0)|答案(4)|浏览(126)

我的应用在前端使用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的时候哪里出错了吗？

csv

来源：https://stackoverflow.com/questions/63292900/upload-csv-with-fastapi-and-js-fetch

4条答案

按热度按时间

csga3l581#

我最终解决了这个问题。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

赞(0）回复(0）举报 2023-11-14

o8x7eapl2#

确保表单中的文件名与参数中的文件名匹配！
请看下面我对同一问题的回答。
如何使用Postman将文件发送到FastAPI端点

赞(0）回复(0）举报 2023-11-14

xzv2uavs3#

@henry-dashwood的回答对我来说很有效，但我不得不修改一下，让它在SvelteKit中工作：

import { env } from '$env/dynamic/private';

/** @type {import('./$types').Actions} */
export const actions: import('./$types').Actions = {
    uploadFile: async ({ request }) => {

        // Get the form data
        const formData = await request.formData();
        const file = formData.get('fileToUpload') as File; // taken from the `name` field on the form
        formData.append('file', file, file.name);

        await fetch(`${env.BACKEND_URL}/pdf-upload/`, {
            method: 'POST',
            body: formData
        })
            .then((res) => res.json())
            .then((data) => console.log(data))
            .catch((error) => console.error('Error:', error));

        return {
            success: true
        };

    }
};

字符串

赞(0）回复(0）举报 2023-11-14

egdjgwm84#

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

字符串

赞(0）回复(0）举报 2023-11-14

我来回答

使用FastAPI和JS fetch上传.csv

4条答案

相关问题

热门标签

最新问答