无法使用 react 和 '@azure/storage-blob' 将内容类型设置为上传 blob

Question

我已经从画布生成图像并将其上传到天蓝色存储..问题是内容类型始终是“application/octet-stream”，我需要它是“image/png”才能使用文件.. 这是我尝试过的，但没有运气..提前谢谢

  private blobUploader(){

const account = "acuontname";
const sas = "SAS_STRING";


const url = `https://${account}.blob.core.windows.net${sas}`;

const blobServiceClient = new BlobServiceClient( url);

const containerName = "containerName";
const dataURI = this.canvasCompRef.current.getOutputBase64();
async function main() {
  const containerClient = blobServiceClient.getContainerClient(containerName);
  const content = dataURI.split('base64,')[1];
  const blobName = "newblob" + new Date().getTime() + ".png";

  let blockBlobClient = containerClient.getBlockBlobClient(blobName);
  blockBlobClient.setHTTPHeaders({blobContentType:'image/png'});
  const buffer = new Buffer(content, 'base64');
  const uploadBlobResponse = await blockBlobClient.upload(buffer, buffer.byteLength);
  // we are running it in browser
  console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);
}

main();

}

Answer 1

如下更改您的代码，它对我有用。

let blockBlobClient = containerClient.getBlockBlobClient(blobName);
const blobOptions = { blobHTTPHeaders: { blobContentType: 'image/png' } };
const buffer = new Buffer(content, 'base64');
const uploadBlobResponse = await blockBlobClient.upload(buffer, buffer.byteLength, blobOptions); 
console.log(`Upload block blob ${blobName} successfully`, uploadBlobResponse.requestId);