将 excel 文件从 React 应用程序上传到 FastAPI

IT技术 python reactjs fastapi
2021-05-27 03:52:04

好的,我真的希望关于这个主题的其他各种问题之一能帮助我,但我根本无法完成这项工作!我对 React 和使用 API 请求比较陌生。我希望从我的 React 应用程序上传一个 excel 文件,然后使用 FastAPI 作为接口在 python 中处理它。

我遵循了各种教程/文档方法,但我得到了一个 422 不可处理的实体错误!

在 React 中,我的事件处理程序如下所示:

选择文件后,将文件设置为状态:

    onFileChange = (event) => {
        this.setState({
            uploadFile: event.target.files[0],
            isFileSelected: true
        });
    };

当“上传”按钮被按下时,附加到一个 FormData 对象并通过 axios 请求发送(数据库是 axios 对象):

   onUploadClick = async (event) => {
        event.preventDefault()
        var formData = new FormData();

        formData.append(
            "UploadFile",
            this.state.uploadFile,
            this.state.uploadFile.name
        );

        this.setState({isFileUploaded: true})
        console.log(this.state.uploadFile)

        const headers={'Content-Type': this.state.uploadFile.type}
        
        await Database.post("/FileUpload",formData,headers);
    };

我的 FastAPI 处理程序如下所示:

@app.post("/FileUpload")
async def FileUpload(file: UploadFile = File(...)):
    # do some things...

有人可以让我摆脱我的痛苦吗?

1个回答

您的问题是由于相同的原因

如何使用邮递员将文件发送到fastapi端点

fastapi 端点中文件变量的名称必须与表单数据文件的密钥名称匹配。也就是说,你的 javascript 应该像

formData.append(
    "file",
    this.state.uploadFile,
    this.state.uploadFile.name
);

以便您的端点能够访问该file参数。否则更改参数的名称(UploadFile在您的情况下)。