Загрузите объект File в хранилище Azure из React js / node js

Я пытаюсь просмотреть файл и загрузить его в учетную запись хранилища Azure непосредственно из приложения response js / node js. Пробовал с парой модулей «azure-storage» и «@ azure / storage-blob». Я могу создать / загрузить большой двоичный объект с некоторым содержимым вручную и загрузить его в учетную запись хранилища Azure, но я не могу найти способ загрузить файл, выбранный с помощью функции «Обзор - выберите файл (тип ввода = файл).

Пожалуйста, предложите мне хороший подход.

Ниже приведен пример кода. Здесь 'file' - это объект File, который просматривается через material-ui-dropzone - DropzoneArea.

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

Заранее спасибо.


person Ram Anji    schedule 30.09.2020    source источник
comment
Я думаю, что этот урок должен быть хорошим примером. Это должно тебе помочь.   -  person Jason Pan    schedule 01.10.2020


Ответы (1)


Вы можете сначала прочитать этот блог.

Загрузить в хранилище BLOB-объектов Azure с помощью React

Я посмотрел на документ и попробовал еще раз. Приведенная ниже gif-анимация должна быть именно тем результатом, который вам нужен.

введите описание изображения здесь

Я процитировал официальный пример кода, потому что есть требования к некоторым зависимым версиям, которые нельзя использовать сразу после загрузки. Я исправил эту проблему и загрузил его в свой собственный github, вы можете скачать его.

Если вам нужно использовать его в своем проекте, внимательно прочтите исходный код и измените конфигурацию.

person Jason Pan    schedule 01.10.2020