Question

如果我将PDF发布到我的供应商API，他们会将.png文件作为blob返回给我（请参阅更新2，因为我现在不确定他们是否正在返回blob数据）。

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

这不是有效的位图文件，或者其格式当前不是支撑。

我已经确认图片是正确发送给我的，因为供应商可以打开他们身边的.png。我想知道是否需要将其转换为base64或将其保存到本地Web目录，然后再将其上载到Azure Blob存储。

这是我的Angular前端控制器，它在收到返回的“图像”后调用我的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：此处提供的答案允许我传递某些端点的供应商API的网址：Download file via Webservice and Push it to Azure Blob Storage via Node/Express

它将端点上的文件写入临时文件夹。在我目前的场景中，我上传了一个PDF文件，它返回了我需要上传到Azure Blob存储的图像文件。有没有办法在这里使用答案，但调整它为我已经拥有的文件（因为它返回给我）与文件流从URL？

更新2：在控制台中记录返回的“文件”，看起来它可能是数据。我不确定，它看起来像这样：

这实际上是数据，如果是，我该如何将其转换为文件以供上传？

更新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);
    }
  });
})

Answer 2

下面我有使用FormData以角度上传图像为二进制的代码服务器代码将是通过表单处理常规文件上载的代码。

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 formData = new FormData()
        formData.append('file', blob);
        formData.append('containerName', boxContainerName);
        formData.append('filename', 'Texture_0.png');

        $http.post('/postAdvancedTest', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).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);

Answer 3

I have solved the issue (thanks to Yang's input as well). I needed to base64 encode the data on the client side before passing it to node to decode to a file. I needed to use XMLHTTPRequest to get binary data properly, as jQuery AJAX appears to have an issue with returning (see here: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/).

Here is my front end:

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

Node Backend:

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);
            }
        });
    }
}) 
})

通过对Azure Blob存储的AJAX调用返回的保存blob（可能是数据！）会创建损坏的图像

3 个答案: