问题描述
我使用 azure blobclientservice 上传图像,如下所示
let fr = new FileReader();
let result = {};
fr.onload = async function () {
var data = fr.result;
await blockBlobClient
.uploadData(data,{
concurrency: 20,blobHTTPHeaders: {
blobContentType: photo.type,},})
.then((res) => {
result = res;
console.log(res);
})
.catch((error) => {
console.log(error);
result.error = true;
});
};
fr.readAsArrayBuffer(photo);
我成功地从响应中获取了 url。 我希望将这个 url 用作 html 中图像标签中的 src,而不是从存储中下载所有数据。 但它不显示图像,我只能看到 alt 而不是图像。 我认为当图像作为公共存储在 aws s3 存储桶中时,可以通过使用 url 来读取图像。 我希望在 azure 存储中具有相同的功能。 是否有可能? 如果有人帮助我,我将不胜感激。
解决方法
您的图片应该能够显示在您的页面上:
<img src="the_url_of your_image">
当您的图像 blob 是公开的时,您可以使用 Blob URL(https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}
) 访问 blob。
如果访问级别是私有的,您可以使用 SAS 访问图像 blob。 URL 看起来像 https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}?{Blob SAS token}
。
尝试使用 generateBlobSASQueryParameters 生成 Blob SAS 令牌。
// Generate service level SAS for a blob
const blobSAS = generateBlobSASQueryParameters({
containerName,// Required
blobName,// Required
permissions: BlobSASPermissions.parse("racwd"),// Required
startsOn: new Date(),// Optional
expiresOn: new Date(new Date().valueOf() + 86400),// Required. Date type
cacheControl: "cache-control-override",// Optional
contentDisposition: "content-disposition-override",// Optional
contentEncoding: "content-encoding-override",// Optional
contentLanguage: "content-language-override",// Optional
contentType: "content-type-override",// Optional
ipRange: { start: "0.0.0.0",end: "255.255.255.255" },// Optional
protocol: SASProtocol.HttpsAndHttp,// Optional
version: "2016-05-31" // Optional
},sharedKeyCredential // StorageSharedKeyCredential - `new StorageSharedKeyCredential(account,accountKey)`
).toString();