从React JS / Node JS将File对象上传到Azure存储

如何解决从React JS / Node JS将File对象上传到Azure存储

我正在尝试浏览文件并将其直接从react js / node js应用程序上传到Azure存储帐户。尝试了几个模块“ azure-storage”和“ @ azure / storage-blob”。我可以手动创建/上传包含某些内容的Blob，然后将其上传到Azure存储帐户，但是我找不到上载通过“浏览-选择文件（输入类型=文件）选择的文件”的方法。>

请给我建议一个好方法。

以下是示例代码：这里的“文件”是通过 material-ui-dropzone-DropzoneArea

浏览的File对象

import {BlobServiceClient,StorageSharedKeyCredential} from '@azure/storage-blob';

const sharedKeyCredential = new StorageSharedKeyCredential(azureStorageAccount,azureStorageAccessKey);
const serviceClient = new BlobServiceClient(
  // When using AnonymousCredential,following url should include a valid SAS
  `https://${azureStorageAccount}.blob.core.windows.net`,sharedKeyCredential
);

let containerExists = false;
for await (const container of containerIter) {
  if (container.name === containerName) {
    containerExists = true;
    break;
  }
}
const containerClient = serviceClient.getContainerClient(containerName);
if (!containerExists) {
  const createContainerResponse = await containerClient.create();
  console.log('Container was created successfully',createContainerResponse.requestId);
}

// below working fine
const content = 'samle content';
const blobName = 'sample.txt';
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const uploadBlobResponse = await blockBlobClient.upload(content,content.length);
console.log(`Upload block blob ${blobName} successfully`,uploadBlobResponse.requestId);

// NOT WORKING : here file is a File object
const blobName = file.name;
console.log(blobName);
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const uploadBlobResponse = await blockBlobClient.uploadbrowserData(file);
console.log(`Upload block blob ${file.name} successfully`,uploadBlobResponse.clientRequestId);

谢谢。

解决方法

您可以先阅读此博客。

Upload to Azure Blob Storage with React

我查看了文档，然后再次尝试。下面的gif动画应该是您想要的结果。

我引用了官方示例代码，因为对某些从属版本有要求，下载后不能直接使用。我已解决此问题，并将其上传到我自己的github you can download it。

当需要在项目中使用它时，请仔细阅读源代码并修改配置。