尝试通过 XMLHttpRequest 将 pdf 文件发送到 FastAPI 时出现问题答案

【问题标题】：Issue when trying to send pdf file to FastAPI through XMLHttpRequest尝试通过 XMLHttpRequest 将 pdf 文件发送到 FastAPI 时出现问题
【发布时间】：2021-02-27 14:50:49
【问题描述】：

上下文

我有一个 pdf 文件，这要归功于我的网络客户端上的拖放操作。（感谢event.dataTransfer.files[0]，该文件是在“drop”事件中获得的）。该文件是一个有效的文件，因为我可以利用 javascript pdf 库来利用它。

我想将此文件发送到我用 XMLHttpRequest 编写的 API。 API 是使用fastAPI 库编写的python API。

问题

我无法在 python API 上捕获文件...

环境

我的 Web 界面是本地托管在 python 服务器上的。我的 API 也是本地托管在具有启用 CORS 策略的 uvicorn 服务器上。我有具体的“路线”：

本地主机：端口/令牌

这给了我 API 的状态（如果 API “准备好”）。 “token”只是一个访问令牌。

我能够从我的 Web 客户端在此路由上执行 XMLHtppRequest 并毫无问题地获得 JSON 响应。

这是 javascript 请求：

// Get the API status
export function pingApi() {
    let xhr = new XMLHttpRequest();

    // Request response treatment
    xhr.onload = function () { 
        if (this.status === 200) {
            let obj = JSON.parse(this.responseText);
            console.log(obj);
        }
    }

    // Send the request
    xhr.open("GET", API_STATUS_ENDPOINT + "/" + API_TOKEN, true);
    xhr.send();
}

但是当我尝试将请求发送到 API 时，我得到一些错误记录在后面。

这里是对 API 的请求：

// Send the request to the pdfclass API
export function sendPdf(file) {
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    
    // Request response treatment
    xhr.onload = function () { 
        if (this.status === 200) {
            let obj = JSON.parse(this.responseText);
            console.log(obj);
        }
    }

    // Create the form data object
    formData.append("pdf", file);

    xhr.open("POST", API_PDF_ENDPOINT + "/" + API_TOKEN, true);
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');

    // Send the request
    xhr.send(formData);
}

如您所见，我正在使用 formData 发送我的 pdf 文件。

Python API

我在这里展示了python API路由的细节：

# Send a pdf document via form
        @self.api.post("/uploadPdfForm/{token}")
        async def upload_pdf_form(token: str, request: Request):
            # Authorized token required
            if self.is_authorized(token):

                # Get the form object
                form = await request.form()
                # Get the uploaded file
                uploaded_pdf = form['pdf']
       ...

这是我得到的 python 错误日志：

...
文件“D:[OpenStudio]\Workspace\api-pdfclass\lib\pdfclassapi.py”，第 89 行，在upload_pdf_form form = 等待 request.form()

文件 "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\requests.py", 第 239 行，表格 self._form = 等待 multipart_parser.parse()

文件 "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\formparsers.py", 第 181 行，解析中 parser = multipart.MultipartParser(boundary, callbacks)

文件 "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\multipart\multipart.py", 第 1042 行，在 init 中 self.boundary = b'\r\n--' + 边界

TypeError: 无法将 NoneType 连接到字节

我的 Web 客户端控制台上也出现“CORS 策略”问题，但我真的认为这是因为 API 端没有正确处理请求，因为 API 服务器上允许使用 CORS。

我尝试了什么

我现在在这个文件传输上卡住了 3 天.. 我尝试了很多事情，比如使用 jquery，不使用 formData，尝试编码我的文件，尝试在我的 API 中直接使用 FastAPI 的表单...

我真的不明白为什么这个请求不起作用。任何帮助将不胜感激

【问题讨论】：

尝试删除设置Content-Type 标头的行。分段上传需要在该请求标头中指定一个边界，但是通过自己设置（并且没有设置），您可能会覆盖浏览器根据使用的 FormData 自动提供的边界。
Man.. 你真的救了我！哦，伙计，那是因为标题被覆盖了。非常感谢，在我删除这条线后，一切都立即运行良好。 Edit请写一个我可以接受的答案
好的，我把评论变成了一个快速的答案，所以你有一些东西要标记为已解决。

标签： javascript python-3.x fastapi

【解决方案1】：

删除设置Content-Type 标头的行。

分段上传需要在该请求标头中指定边界，但是通过自己设置（并且没有设置），您将覆盖浏览器将根据 FormData 被使用自动提供的边界.

【讨论】：