Javascript 如何将base64编码的图像发送到FastAPI后端

我使用来自和的代码将base64编码的图像发送到python FastAPI后端。客户端如下所示：

function toDataURL(src, callback, outputFormat) {
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function() {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');
                var dataURL;
                canvas.height = this.naturalHeight;
                canvas.width = this.naturalWidth;
                ctx.drawImage(this, 0, 0);
                dataURL = canvas.toDataURL(outputFormat);
                callback(dataURL);
            };
            img.src = src;
            if (img.complete || img.complete === undefined) {
                img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                img.src = src;
            }
        }

        function makeBlob(dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);
                return new Blob([raw], { type: contentType });
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;

            var uInt8Array = new Uint8Array(rawLength);

            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }

            return new Blob([uInt8Array], { type: contentType });
        }

        ...

        toDataURL(
            images[0], // images is an array of paths to images
            function(dataUrl) {
                console.log('RESULT:', dataUrl);

                $.ajax({
                    url: "http://0.0.0.0:8000/check/",
                    type: 'POST',
                    processData: false,
                    contentType: 'application/octet-stream',
                    data: makeBlob(dataUrl)
                }).done(function(data) {console.log("success");}).fail(function() {console.log("error");});
            }
        );

我只显示端点的签名，因为目前为止，它没有发生什么变化

下面是我调用后端时的输出，如上图所示：

172.17.0.1:36464-“选项/检查/HTTP/1.1”200

172.17.0.1:36464-“POST/check/HTTP/1.1”307

172.17.0.1:36464-“选项/检查HTTP/1.1”200

172.17.0.1:36464-“发布/检查HTTP/1.1”422

---

简而言之，我一直收到422个错误代码，这意味着我发送的内容与端点期望的内容不匹配，但即使经过一些阅读，我仍然不清楚到底是什么问题。欢迎任何帮助

对于故障隔离：当您使用TypedArray的缓冲区而不是TypedArray本身时会发生什么？如下所示：

newblob（uInt8Array.buffer，{type:contentType}）而不是这个
新Blob（[uInt8Array]，{type:contentType}）
您是否尝试将
UploadFile
作为文件参数的类型@RandyCasburn如果我尝试得到以下错误：
uncaughttypeerror:Blob构造函数：参数1无法转换为序列。
@lsabi是的，我也尝试过，完全相同的行为！让我想到，无论我的Javascript发送什么，都不能被识别为文件，甚至不能被识别为正确的ByTestStream，这有意义吗？我无法使用已知良好图像的精确代码重新创建问题。最可能的原因是服务器上的损坏图像或指向非图像文件（如伪装为图像的文本文件）的图像路径。换句话说，您的代码可以正常运行（即使您没有提供
toDataURL（）的第三个参数）
并在代码中直接使用
未定义的
第三个参数。对于故障隔离：当您使用类型Darray的缓冲区而不是类型Darray本身时会发生什么情况？如下所示：
新Blob（uInt8Array.buffer，{type:contentType}）；
而不是此
新Blob（[uInt8Array]，{type:contentType}）
您是否尝试过将
UploadFile
作为文件参数的类型？@RandyCasburn如果我尝试，我会得到以下错误：
未捕获类型错误：Blob构造函数：参数1无法转换为序列。
@lsabi是的，我也尝试过，完全相同的行为！使我认为Javascript发送的任何内容都不会被重新记录gnized既不是文件，也不是正确的ByTestStream，这有意义吗？我无法使用已知良好映像的精确代码重新创建问题。最有可能的原因是服务器上的映像损坏或指向非映像文件的映像路径（如伪装为映像的文本文件）。换句话说，您的代码在编写时可以正常工作（即使您没有为
toDataURL（）
提供.third参数，并直接在代码中使用
undefined
第三个参数）。
@app.post("/check")
async def check(file: bytes = File(...)) -> Any:  
    // do something here