Successfully Saving base64 Image to Azure Blob storage but blob image always broken/small white box

问题

I have a image converted to base64 I am trying to upload to my azure blob storage using createBlockBlobFromText.

self.blobServer.createBlockBlobFromText(containerName, fileName, baseStrChars, { contentSettings: { contentType: 'image/jpeg' } }, function(error, result, response) {
     if (error) {
         console.log(error);
     }
     console.log("result", result);
     console.log("response", response);
});

My new jpeg image appears in blob storage container but when I go to the blob image URL I always get this.

My container's access policy is set to container and I pasted my base64 string to a base64 to image converter and the correct image appears. The problem seems to be the way I create the blob and not the base64 string.

I am puzzled as to why the whole flow seems to be working, but still the image is broken when I go to the URL. Any ideas ?

回答1:

To visit the images directly via Urls in browser requires binary content. You can convert the base64 encoded string to binary buffer in your node.js backend, and upload the buffer string to Azure Storage.

Please try the following code snippet:

var rawdata = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
var type = matches[1];
var buffer = new Buffer(matches[2], 'base64');

blobsrv.createBlockBlobFromText('mycontainer','profile-pic-123.jpg', buffer, {contentType:type}, function(error, result, response) {
        if (error) {
            console.log(error);
        }else{
         console.log(result)
        }
    });

来源：https://stackoverflow.com/questions/39582878/successfully-saving-base64-image-to-azure-blob-storage-but-blob-image-always-bro