Как заставить пользователя видеть, как загружается файл хранилища больших двоичных объектов Azure вместо загрузки всего потока на самой вкладке сети в Angular

Question

У меня есть кнопка загрузки, которую пользователь нажимает, чтобы загрузить медиафайл из Azure хранилища BLOB-объектов. Я ожидал, что загрузка начнется сразу, и пользователь сможет видеть ход загрузки, но вместо этого он не будет загружен до тех пор, пока не будет выполнен запрос.

Как Вы можете видеть на рисунке выше. Загрузка потока занимает почти 30 секунд, а затем пользователь видит загруженный файл. Не могли бы вы, пожалуйста, кто-нибудь помочь мне в достижении поведения, показанного на изображении ниже

Я использую файл-заставку. js для сохранения файла в Angular

this.downloadMediaService.downloadAsset(assetId).then((httpResponse) => {
        const {body: blob} = httpResponse;
        this.mediaBlob = blob;
        Filesaver.saveAs(blob, this.assetName);
      });
    }

Answer 1

Если вы хотите узнать, сколько байт вы скачали при загрузке файла из Azure blob, вы можете использовать sdk @azure/storage-blob для его реализации.

Например

1. установить SDK

npm install @azure/storage-blob
npm install crypto-js --save
npm install @types/crypto-js --save-dev

Код

import {BlobServiceClient,AnonymousCredential,newPipeline } from '@azure/storage-blob';
import * as CryptoJS from 'crypto-js';
...



downlaod(){
 // genereate access token



const accountname =" storage account name";
  const key="storage account key";
  const start = new Date(new Date().getTime() - (15 * 60 * 1000));
  const end = new Date(new Date().getTime() + (30 * 60 * 1000));
const signedpermissions = 'rwdlac';
  const signedservice = 'b';
  const signedresourcetype = 'sco';
  const signedexpiry = end.toISOString().substring(0, end.toISOString().lastIndexOf('.')) + 'Z';
  const signedProtocol = 'https';
  const signedversion = '2018-03-28';



  const StringToSign =
      accountname + '\n' +
      signedpermissions + '\n' +
      signedservice + '\n' +
      signedresourcetype + '\n' +
       '\n' +
      signedexpiry + '\n' +
       '\n' +
      signedProtocol + '\n' +
signedversion + '\n';

var str =CryptoJS.HmacSHA256(StringToSign,CryptoJS.enc.Base64.parse(key));
var sig = CryptoJS.enc.Base64.stringify(str);




 const sasToken =`sv=${(signedversion)}&ss=${(signedservice)}&srt=${(signedresourcetype)}&sp=${(signedpermissions)}&se=${encodeURIComponent(signedexpiry)}&spr=${(signedProtocol)}&sig=${encodeURIComponent(sig)}`;
  const containerName="test";

            const pipeline =newPipeline (new AnonymousCredential(),{
            retryOptions: { maxTries: 4 }, // Retry options
            userAgentOptions: { userAgentPrefix: "AdvancedSample V1.0.0" }, // Customized telemetry string
            keepAliveOptions: {
                // Keep alive is enabled by default, disable keep alive by setting false
                enable: false
            }
            });

            const blobServiceClient =new BlobServiceClient(`https://${accountname}.blob.core.windows.net?${sasToken}`,
                                                             pipeline  )
            const containerClient =blobServiceClient.getContainerClient(containerName)
            const blob =containerClient.getBlockBlobClient("SampleVideo_1280x720_1mb.mp4")
           const r= await blob.getProperties()
           const totalSize = r.contentLength
             blob.download(null,null,{onProgress: (ev) => 


               console.log("You have download "+ ev.loadedBytes +" bytes\nThe process:"+ev.loadedBytes/totalSize ) }



              ).then(response =>  response.blobBody.then(b => {



console.log(b.size)
// save file
}))






}

Answer 2

С помощью SDK вы можете создать ссылку SAS (подпись общего доступа), которая разрешает пользователю получать файл напрямую из хранилища BLOB-объектов Azure. Дополнительным преимуществом этого является то, что вашему веб-сайту или приложению не нужно загружать его перед отправкой пользователю. Таким образом, он также появляется в нижней панели загрузки браузера.

У меня есть только пример кода в c#, но шаги должны быть универсальными:

• Создать новый SharedAccessBlobPolicy
• Установить для SharedAccessStartTime значение за час до разрешения на загрузку (чтобы не задерживаться azure смещением времени)
• Сделайте GetSharedAccessSignature(policyObject) на BLOB-объекте
• Получите ссылку путем объединения blob.Uri и подпись общего доступа
• Отправьте эту ссылку в браузер для перенаправления. Использование target="_blank" по ссылке гарантирует, что вы останетесь на предыдущей странице и по-прежнему сможете загрузить

.