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

Question

上下文

我有一个 pdf 文件，感谢拖放我的网络客户端。（该文件是在 'drop' 活动中获得的，感谢 event.dataTransfer.files[0]）。该文件是一个有效文件，因为我可以利用它感谢 javascript pdf 库。

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

问题

我无法在 python API...

上捕获文件

环境

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

localhost:port/token

给我 API 的状态（如果 API 是“就绪”）。 “令牌”只是一个访问令牌。

我能够从我的 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 错误日志：

...
File "D:[OpenStudio]\Workspace\api-pdfclass\lib\pdfclassapi.py", line 89, in upload_pdf_form form = await request.form()

File "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\requests.py", line 239, in form self._form = await multipart_parser.parse()

File "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\formparsers.py", line 181, in parse parser = multipart.MultipartParser(boundary, callbacks)

File "C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\multipart\multipart.py", line 1042, in init self.boundary = b'\r\n--' + boundary

TypeError: can't concat NoneType to bytes

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

我试过的

我在这个文件传输上卡住了 3 天了..我尝试了很多方法，比如使用 jquery，不使用 formData，尝试编码我的文件，尝试直接使用 Fast 的 Form API 在我的 API...

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

Answer 1

删除设置 Content-Type header.

的行

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

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

Issue when trying to send pdf file to FastAPI through XMLHttpRequest

javascript

python-3.x

fastapi