Question

好吧，我真的希望有关该主题的其他各种问题之一对我有帮助，但我根本无法完成这项工作！我对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...

有人可以让我摆脱痛苦吗？

Answer 1

您的问题是由于与以下原因相同

How to send file to fastapi endpoint using postman

fastapi终结点中的文件变量名称必须与表单数据文件的键名称匹配。也就是说，您的javascript应该像

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

，以便您的端点能够访问file参数。否则，请更改参数的名称（您的情况下为UploadFile）。

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

1 个答案: