无法使用前端中使用JavaScript Fetch API上传到FastApi后端

Question

我试图弄清楚如何将图像发送到我的API，并还验证请求的 header 中生成的令牌。

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

@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
}

问题： 这将打印上传文件的文件名，但是令牌未传递，并将其打印为 none 。我怀疑这可能是由于 content-type ，或者我试图强迫fastapi去做不打算做的事情。

Answer 1

根据文档：

警告：使用FormData 使用 POST 请求=“不关注” noreferrer">XMLHttpRequest 或 Fetch_API 与
multipart/form-data 内容类型（例如上传文件 和
Blob 到服务器） ，不要显式设置内容类型
请求的标头。这样做会阻止浏览器
能够使用 boundary 表达式设置 Content-Type 标头
它将用于分隔请求正文中的表单字段。

因此，在发送 fetch 请求时，您应该从代码中删除 Content-Type 标头。这同样适用于通过 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 的一部分而不是作为标头发送，可以让我获取参数。