成功将 base64 图像保存到 Azure Blob 存储，但 Blob 图像总是损坏/小白框 [英] Successfully Saving base64 Image to Azure Blob storage but blob image always broken/small white box

问题描述

我有一个转换为 base64 的图像我正在尝试使用 createBlockBlobFromText 上传到我的天蓝色 blob 存储.

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

我的新 jpeg 图像出现在 blob 存储容器中，但是当我转到 blob 图像 URL 时，我总是得到 这个.

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

我的容器的访问策略设置为容器，我将我的 base64 字符串粘贴到一个 base64 到图像转换器并出现正确的图像.问题似乎是我创建 blob 的方式而不是 base64 字符串.

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.

我很困惑为什么整个流程似乎都在工作，但是当我转到 URL 时图像仍然损坏.有什么想法吗?

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 ?

推荐答案

在浏览器中直接通过Urls访问图片需要二进制内容.您可以在 node.js 后端将 base64 编码字符串转换为二进制缓冲区，并将缓冲区字符串上传到 Azure 存储.

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.

请尝试以下代码片段:

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

这篇关于成功将 base64 图像保存到 Azure Blob 存储，但 Blob 图像总是损坏/小白框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！