javascript - 保存 AJAX 调用返回的 Blob(可能是数据!)到 Azure Blob 存储会创建损坏的图像

Question

如果我将 PDF 发布到我的 vendor API，他们会返回一个 .png 文件作为 blob(请参阅更新 2，因为我现在不确定他们是否返回 blob 数据)。

我想将其推送到 Azure Blob 存储中。使用下面列出的我的代码，它会插入一些内容，但文件已损坏。示例:从 Azure Blob 存储下载 .png 并尝试使用 Paint 打开它会出现以下错误:

This is not a valid bitmap file, or its format is not currently supported.

我已经验证图像是否正确发送给我，因为 vendor 能够在他们这边打开 .png。我想知道是否需要将其转换为 base64 或将其保存到本地 Web 目录，然后再将其上传到 Azure Blob 存储。

这是我的 Angular 前端 Controller ，它会调用我的 Node/Express 后端，以便在收到返回的“图像”后上传到 Azure:

$.ajax({
            url: 'http://myvendorsapi.net/uploadPDF,
            type: "POST",
            data: formdata,
            mimeType: "multipart/form-data",
            processData: false,
            contentType: false,
            crossDomain: true,
            success: function (result) {          
                var containerName = 'container1';
                var filename = 'Texture_0.png';
                var file = result;
                $http.post('/postAdvanced', { containerName: containerName, filename: filename, file: file }).success(function (data) {
                    console.log("success!");
                }, function (err) {
                    //console.log(err);
                });
            },
            error: function (error) {
                console.log("Something went wrong!");
            }
        })
    }

这是我的 Node/Express 后端，它将 Blob 上传到 Azure Blob 存储。它没有给出错误，但文件无法打开/在 Paint 中打开时出现上述错误:

app.post('/postAdvanced', function (req, res, next) {
    var containerName = req.body.containerName;
    var filename = req.body.filename;
    var file = req.body.file;

    blobSvc.createBlockBlobFromText(containerName, filename, file, function (error, result, response) {
        if (!error) {
            res.send(result);
        }
        else {
            console.log(error);
        }
    });
})

更新 1:此处提供的答案允许我传入某些端点的 vendor API 的 URL: Download file via Webservice and Push it to Azure Blob Storage via Node/Express

它的工作原理是将端点处的文件写入临时文件夹。在我当前的场景中，我上传一个 PDF 文件，它返回一个图像文件，我需要将其上传到 Azure Blob 存储。有没有办法使用这里的答案，但针对我已经拥有的文件(因为它返回给我)与来自 URL 的文件流进行调整？

更新2:在控制台记录返回的"file"时，看起来它可能是数据。我不确定，看起来像这样:

这实际上是数据吗？如果是，我如何将其制作成文件进行上传？

更新3:

因为 jQuery AJAX 似乎无法管理二进制返回。我可以使用 XMLHTTPResponse “打开”blob，如下所示，但我似乎无法将其推送到 Azure，因为它给出了以下错误:

TypeError: must start with number, buffer, array or string

这是我的请求。请注意，文件可以正确打开:

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://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);

Answer 1

createBlockBlobFromText 将使用字符串或缓冲区。由于已知 issue，您可能需要一个缓冲区来保存二进制内容。 jQuery 的。

对于解决方法，有多种选择:

选项 1: Reading binary filesusing jquery ajax

选项 2: Use native XMLHttpRequest

选项 3: 也使用 Node 编写前端和 browserify它。您的前端代码可能如下所示:

var request = require('request');

request.post('http://myvendorsapi.net/uploadPDF', function (error, response, body) {
  if (!error && response.statusCode == 200) {
    var formData = { 
      containerName: 'container1',
      filename: 'Texture_0.png',
      file: body
    };
    request.post({ uri: '/postAdvanced', formData: formData }, function optionalCallback(err, httpResponse, body) {
      if (err) {
        return console.error('upload failed:', err);
      }
      console.log('Upload successful!  Server responded with:', body);
    });
  } else {
    console.log('Get snapshot failed!');
  }
});

那么后端代码可能如下所示:

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, options, function (error, result, response) {
    if (!error) {
      res.send(result);
    } else {
      console.log(error);
    }
  });
})