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

【问题标题】：Uploading an excel file to FastAPI from a React app从 React 应用程序将 excel 文件上传到 FastAPI
【发布时间】：2021-02-21 13:42:08
【问题描述】：

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

我遵循了各种教程/文档方法，但我只是收到 422 Unprocessable Entity Error！

在 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...

有人能帮我解脱吗？

【问题讨论】：

标签： python reactjs fastapi

【解决方案1】：

您的问题与

的原因相同

How to send file to fastapi endpoint using postman

您的 fastapi 端点中的文件变量的名称必须与您的表单数据文件的密钥名称相匹配。也就是说，您的 javascript 应该是这样的

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

为了让您的端点能够访问file 参数。否则更改参数的名称（在您的情况下为UploadFile）。

【讨论】：