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

Question

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

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

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

我有另一个 function 触发更改侦听器并上传 function，传递参数： 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 做一些不应该做的事情。

Answer 1

根据文档：

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

因此，您应该从代码中删除Content-Type header。 这同样适用于通过Python 请求发送请求，如此处和此处所述。 在 multipart/form-data 中阅读有关边界的更多信息。

有关如何在后端使用 FastAPI 上传文件并在前端使用 Fetch API 的工作示例可以在此处、此处以及此处和此处找到。

Answer 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 的一部分而不是 header 发送让我可以获取参数。