可以打开XMLHTTPRequest返回的blob，但可以't上载到Azure

Can open blob returned by XMLHTTPRequest, but can't upload to Azure

本文关键字：上载 Azure 但可以 XMLHTTPRequest 返回 blob      更新时间：2023-09-26

我可以将文件上传到我的供应商API，供应商将.png文件作为二进制数据进行响应。我可以在浏览器中将其写入blob，但无法将其上传到Azure blob存储中。我还尝试使用fs.writefile将其上传到Web目录，但这会产生损坏/非位图图像。

理想情况下，我想直接将我的blob上传到Azure，但当我尝试时，它会给我以下错误：

TypeError：必须以数字、缓冲区、数组或字符串开头

如果我需要将blob上传到Web目录并使用Azure的createBlockBlobFromLocalFile，我会非常乐意，但到目前为止我的尝试都失败了。

这是我的XMLHTTPRequest，它在浏览器中打开图像，在我发布文件后返回：

var form=document.forms.namedItem（"fileinfo"）；form.addEventListener（"submit"，function（ev）｛

var oData=新的FormData（表单）；

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("POST", "http://myvendorsapi/Upload", true);
xhr.onload = function (oEvent) {
    if (xhr.status == 200) {
        var blob = new Blob([xhr.response], { type: "image/png" });
        var objectUrl = URL.createObjectURL(blob);
        window.open(objectUrl);
        console.log(blob);
        var containerName = boxContainerName;
        var filename = 'Texture_0.png';
        $http.post('/postAdvanced', { containerName: containerName, filename: filename, file: blob }).success(function (data) {
            //console.log(data);
            console.log("success!");
        }, function (err) {
            //console.log(err);
        });
    } else {
        oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br '/>";
    }
};
xhr.send(oData);
ev.preventDefault();
}, false);

这是我的/postAdvanced调用的Node后端：

app.post('/postAdvanced', function (req, res, next) {
    var containerName = req.body.containerName;
    var filename = req.body.filename;
    var file = req.body.file;
    if (!Buffer.isBuffer(file)) {
    // Convert 'file' to a binary buffer
    }
    var options = { contentType: 'image/png' };
    blobSvc.createBlockBlobFromText(containerName, filename, file, function (error, result, response) {
        if (!error) {
            res.send(result);
        } else {
            console.log(error);
        }
    });
})

如果有人不能帮助我直接上传到Azure，如果我能了解如何将此blob上传到目录，我可以通过createBlockBlobFromLocalFile 将其上传到Azure

我已经解决了这个问题。在将数据传递给节点以解码为文件之前，我需要在客户端对数据进行base64编码。我需要使用XMLHTTPRequest来正确地获取二进制数据，因为jQueryAJAX似乎在返回方面存在问题（请参阅此处：http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/)。

这是我的前端：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {
 var oData = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.responseType = "arraybuffer";
    xhr.open("POST", "http://vendorapi.net/Upload", true);
    xhr.onload = function (oEvent) {
        if (xhr.status == 200) {
            var blob = new Blob([xhr.response], { type: "image/png" });
            //var objectUrl = URL.createObjectURL(blob);
            //window.open(objectUrl);
            console.log(blob);
            var blobToBase64 = function(blob, cb) {
                var reader = new FileReader();
                reader.onload = function() {
                    var dataUrl = reader.result;
                    var base64 = dataUrl.split(',')[1];
                    cb(base64);
                };
                reader.readAsDataURL(blob);
            };
            blobToBase64(blob, function(base64){ // encode
                var update = {'blob': base64};
                var containerName = boxContainerName;
                var filename = 'Texture_0.png';
                $http.post('/postAdvancedTest', { containerName: containerName, filename: filename, file: base64}).success(function (data) {
                    //console.log(data);
                    console.log("success!");
                    // Clear previous 3D render
                    $('#webGL-container').empty();
                    // Generated new 3D render
                    $scope.generate3D();
                }, function (err) {
                    //console.log(err);
                });
            })
        } else {
            oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br '/>";
        }
    };
    xhr.send(oData);
    ev.preventDefault();
}, false);

节点后端：

app.post('/postAdvancedTest', function (req, res) {
    var containerName = req.body.containerName
    var filename = req.body.filename;
    var file = req.body.file;
    var buf = new Buffer(file, 'base64'); // decode
    var tmpBasePath = 'upload/'; //this folder is to save files download from vendor URL, and should be created in the root directory previously.
    var tmpFolder = tmpBasePath + containerName + '/';
    // Create unique temp directory to store files
    mkdirp(tmpFolder, function (err) {
        if (err) console.error(err)
        else console.log('Directory Created')
    });
    // This is the location of download files, e.g. 'upload/Texture_0.png'
    var tmpFileSavedLocation = tmpFolder + filename;
    fs.writeFile(tmpFileSavedLocation, buf, function (err) {
        if (err) {
            console.log("err", err);
        } else {
            //return res.json({ 'status': 'success' });
            blobSvc.createBlockBlobFromLocalFile(containerName, filename, tmpFileSavedLocation, function (error, result, response) {
                if (!error) {
                    console.log("Uploaded" + result);
                    res.send(containerName);
                }
                else {
                    console.log(error);
                }
            });
        }
    }) 
})
相关文章：