首页 > 解决方案 > 将图像 URL 上传到 Azure Blob SAS URL

问题描述

这是我的用例,我正在创建一个将文件上传到 MediaValet(多媒体组织系统)的服务。他们上传文件的文档在这里。我曾尝试使用 Azure-Storage 库,但它似乎不想将文件上传到 blob,而是允许您创建新的 Blob 系统(可能而且可能是错误的,但如果是这样,它似乎被埋没了)。

第一步是发出一个 POST 请求以创建一个占位符,该占位符返回一个 SAS URL。然后,您向 SAS URL 发出 PUT 请求,正文为二进制段。

我的问题是,我正在向图像 URL 发出 GET 请求并将编码设置为 null,这将返回正文的缓冲区。如果我 FS createWriteStream 到一个新的 PNG 文件,它会完美呈现。如果我将其编码为 base64,然后在不同的网站上对其进行解码,它也可以呈现。但是,当我使用二进制正文执行 PUT 请求时,Azure 接受它并上传图像,但它永远不会在 MediaValet 中呈现。它改为显示一个占位符图标。

我的猜测是 Azure 需要不同的标头或参数,但 MediaValet 文档没有提供有关如何构造请求的任何帮助。我一直在与那里的一些联系人合作,他们正在做一些内部挖掘以解决这个问题,但我想我也会和你们一起核实一下。

我确实注意到,当我在本地机器上检查 PNG 的二进制文件时,如果我在 NodeJS 中将图像编码为二进制文件,它看起来会有所不同。

本地机器

âPNG

IHDRBÿ'ÇÛ cHRMz%ÄɢˇÄÈu0Í:òoí_≈FgAMA±è¸aΔ†IDATx⁄Ï›w|\'ùˇˇsÀîKñ%Àñ{ÔΩ~ÇmåczB

节点二进制编码

PNG

IHDRBԂcHRMz%u0:o_FgAMAaƠIDATxw|\՝s̨K%˖{m

如果我使用data:image/png;base64转换节点二进制文件,它会创建一个数据图像,当我将图像上传到 Base64网站时,它会正确呈现,因此我知道编码确实允许图像保持完整。

下面是我正在执行的获取图像并将其编码为 base64 的代码。

const request = require('request');

const uri = 'https://img2.pngio.com/stack-overflow-text-png-download-1024257-free-transparent-stack-overflow-png-900_240.jpg';

request.get({ uri, encoding: null }, (err, res, body) => {
    console.log(body.toString('base64'))
});

我尝试了许多其他选项,例如将编码从二进制更改为二进制或创建一个新的 Buffer.from() 编码为 base64 和二进制。所有结果都允许我上传,但图像永远不会在应用程序中呈现。您可以提供的任何帮助将不胜感激。

更新:下面是向 Azure Blob 服务发出 POST 请求时返回的对 SAS URL 的上传请求的有效负载,返回的是 SAS URL。

    uri: 'https://OBFUSCATED.blob.core.windows.net/medialibrary-OBFUSCATED/OBFUSCATED/OBFUSCATED/Original/1571880311.png?sv=2017-04-17&sr=b&sig=KHCrukoT16oc0s%2Bjqt%2Fow3CGjIc0rxYPdvRMgbErUtw%3D&st=2020-06-09T22%3A13%3A48Z&se=2020-06-11T22%3A28%3A48Z&sp=rw',
    headers: {
      'Content-Length': 50965,
      'Content-Type': 'image/png; charset=UTF-8',
      'x-ms-blob-content-type': 'image/png',
      'x-ms-date': 'Tue, 09 Jun 2020 22:28:48 GMT',
      'x-ms-blob-type': 'BlockBlob'
    },
    body: 'data:image/png;base64,iVBO\NOBFUSCATED'
}```

标签: node.jsazurebinarybase64azure-blob-storage

解决方案


如果您想使用 REST API 将图像上传到 Azure Blob 存储,请参阅文档。这是一个放置动作。

例如

var request = require('request')
request.get({url:'https://img2.pngio.com/stack-overflow-text-png-download-1024257-free-transparent-stack-overflow-png-900_240.jpg', encoding: null}, function (error, response, body) {
    if (!error && response.statusCode == 200) {
       const options={uri: 'https://<>.blob.core.windows.net/image/image11.jpeg?<sas token>',
       headers: {
         'Content-Type':  response.headers["content-type"] +'; charset=UTF-8',
         'x-ms-blob-content-type': response.headers["content-type"],
         'x-ms-blob-type': 'BlockBlob'
       },
       body: body}

       request.put(options,  function (error, response, body){
        //if we successfully upload, we will get stauscode 201
        console.log(response.statusCode)
       })
    }
});

在此处输入图像描述 在此处输入图像描述


推荐阅读