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

问题描述

语境

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

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

问题

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

环境

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

本地主机：端口/令牌

这给了我 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错误日志：

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

文件“C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\requests.py”，第 239 行，形式为 self._form = await multipart_parser.parse()

文件“C:\Users\theop\miniconda3\envs\trainer\lib\site-packages\starlette\formparsers.py”，第 181 行，解析解析器 = multipart.MultipartParser（边界，回调）

文件“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 的表单......

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

标签： javascriptpython-3.xfastapi

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

问题描述

解决方案

推荐阅读