无法在前端使用 Fetch API 将文件上传到 FastAPI 后端答案

【问题标题】：Cannot Upload File to FastAPI backend using Fetch API in the frontend无法在前端使用 Fetch API 将文件上传到 FastAPI 后端
【发布时间】：2022-11-20 02:37:32
【问题描述】：

我正在尝试弄清楚如何将图像发送到我的 API，并验证请求的 header 中生成的 token。

到目前为止，这是我所在的位置：

@app.post("/endreProfilbilde")
async def endreProfilbilde(request: Request,file: UploadFile = File(...)):
    token=request.headers.get('token')
    print(token)
    print(file.filename)

我还有一个触发变化监听和上传功能的函数，传递参数：bildeFila

function lastOpp(bildeFila) {
            var myHeaders = new Headers(); 
            let data = new FormData();
            data.append('file',bildeFila)
            myHeaders.append('token', 'SOMEDATAHERE'); 
            myHeaders.append('Content-Type','image/*');
            let myInit = {
                method: 'POST',
                headers: myHeaders,
                cache: 'default',
                body: data,
            };
            var myRequest = new Request('http://127.0.0.1:8000/endreProfilbilde', myInit); 
            fetch(myRequest)//more stuff here, but it's irrelevant for the Q
}

问题: 这将打印上传文件的filename，但token 未通过并打印为None。我怀疑这可能是由于 content-type，或者我试图强制 FastAPI 做一些不应该做的事情。

【问题讨论】：

标签： python fetch-api fastapi

【解决方案1】：

根据documentation：

警告：当使用FormData提交POST请求时使用XMLHttpRequest或Fetch_API multipart/form-data Content-Type（例如上传Files和 Blobs 到服务器），不要明确设置Content-Type 请求头。这样做会阻止浏览器被能够使用 boundary 表达式设置 Content-Type 标头它将用于分隔请求正文中的表单字段。

因此，你应该消除您代码中的 Content-Type 标头。这同样适用于通过Python Requests发送请求，如here和here所述。阅读更多关于 boundary in multipart/form-data 的信息。

【讨论】：

您确实是正确的，正如我发现的那样，它只是忽略它或抛出错误。我将很快发布我的工作解决方案

【解决方案2】：

因此，由于 Python 的 Discord 服务器中一位乐于助人的小伙子，我弄清楚了这一点。

function lastOpp(bildeFila) {
            let data = new FormData();
            data.append('file',bildeFila)
            data.append('token','SOMETOKENINFO')
}

@app.post("/endreProfilbilde")
async def endreProfilbilde(token: str = Form(...),file: UploadFile = File(...)):
    print(file.filename)
    print(token)

将字符串值作为 formData 的一部分而不是作为标头发送让我可以获取参数。

【讨论】：