загрузить в хранилище Azure прямо из приложения Angular - PullRequest
Новая
       11

загрузить в хранилище Azure прямо из приложения Angular

0 голосов
/ 06 июля 2018

Я использую Angular 5 и эмулятор хранилища Azure.

Я пытаюсь загрузить данные в хранилище Azure прямо из моего приложения Angular. Мой первый шаг к достижению этой цели заключался в этом уроке . Все работает, просто загружая одно изображение. Но когда я пытаюсь загрузить несколько изображений (просто упаковываю их в цикл). Загружается только первое, а иногда и третье. Там никогда не было загружено более двух успешно, и это никогда не загружает последовательные изображения.

, чтобы увидеть проблему, вы можете клонировать этот репозиторий и изменить ввод файла, чтобы разрешить множественное и AppComponent перенос this.blob .uploadToBlobStorage(accessToken, event.target.files[0]); в цикле.

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

Может кто-нибудь посоветовать, в чем может быть проблема и что я мог бы предпринять, чтобы решить мою проблему?

#

EDIT

#

Кажется, что обратные вызовы в некоторой степени являются ответом на мою проблему, но я чувствую, что делаю что-то не так, потому что мой код выглядит немного странно (для меня), и я могу загрузить все изображения, но это не на 100% согласованно. Раз это терпит неудачу (что составляет более 50% времени), я получаю

PUT http://127.0.0.1:10000/devstoreaccount1/mySite/IMG_0593.jpg?mytoken&api-version=2017-07-29 500 (Сервер обнаружил внутреннюю ошибку. Пожалуйста, повторите попытку через некоторое время.)

мой код 

export class Photo implements IPhoto {
    image: File;
    imagePreview: string;
    thumb_image: File;
    thumb_imagePreview: string;
}

imageUrls(roomImages: Photo[]): void {

    const accessToken: IBlobAccessToken = {
        sasToken: 'myToken',
        blobAccountUrl: 'http://127.0.0.1:10000/devstoreaccount1/',
        containerName: 'mySite'
    };

    for(var index = 0; index < roomImages.length; index ++)
    {
        this._blob.uploadToBlobStorage(accessToken, roomImages[index].image);
    }
}

мой код после редактирования 

imageUrls(roomImages: Photo[]): void {

    const accessToken: IBlobAccessToken = {
        sasToken: 'myToken',
        blobAccountUrl: 'http://127.0.0.1:10000/devstoreaccount1/',
        containerName: 'mySite'
    };
    var blob = this._blob;

    for(var index = 0; index < roomImages.length; index ++)
    {
        this.blockingFunction(function() { //called to allow images to be uploaded synchronsly
            blob.uploadToBlobStorage(accessToken, roomImages[index].image);
        });  
    }
}

blockingFunction(_callback){
    _callback();    
}

код из учебника 

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

declare var AzureStorage: any;

export interface IBlobAccessToken {
  blobAccountUrl: string;
  sasToken: string;
  containerName: string;
}

@Injectable()
export class BlobStorageService {

  private finishedOrError = false;

  uploadToBlobStorage(accessToken: IBlobAccessToken, file: File): Observable<number> {
    const progress$ = new Subject<number>();
    const speedSummary = this.uploadFile(accessToken, file, progress$);

    this.refreshProgress(speedSummary, progress$);

    return progress$.asObservable();
  }

  private uploadFile(accessToken: IBlobAccessToken, file: File, progress$: Subject<number>): any {
    const customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
    const blobUri = accessToken.blobAccountUrl;
    const blobService = AzureStorage
      .createBlobServiceWithSas(blobUri, accessToken.sasToken)
      .withFilter(new AzureStorage.ExponentialRetryPolicyFilter());


    blobService.singleBlobPutThresholdInBytes = customBlockSize;

    return blobService.createBlockBlobFromBrowserFile(
      accessToken.containerName,
      file.name,
      file,
      { blockSize: customBlockSize },
      this.callback(progress$, accessToken)
    );
  }

  private refreshProgress(speedSummary: any, progress$: Subject<number>): void {
    setTimeout(() => {
      if (!this.finishedOrError) {
        const progress = speedSummary.getCompletePercent();
        progress$.next(progress);
        this.refreshProgress(speedSummary, progress$);
      }
    }, 200);
  }

  private callback(progress$: Subject<number>, accessToken: IBlobAccessToken): (error, result, response) => void {
    return (error, result, response) => {
      this.finishedOrError = true;
      if (error) {
        progress$.error('Error uploading to blob storage: ' + JSON.stringify(accessToken));
      } else {
        progress$.next(100);
        progress$.complete();
      }
    };
  }
}

1 Ответ

0 голосов
/ 30 июля 2018

Эта проблема в основном возникает при использовании Storage Emulator . Я подтвердил с внутренней командой. Использование реальной учетной записи хранения не приведет к тому же поведению.

...