直接从Angular应用上传到Azure存储

时间:2018-07-05 22:10:32

标签: typescript asynchronous azure-storage-blobs

我正在使用angular 5和Azure存储模拟器。

我正在尝试直接从Angular应用程序上传到Azure存储。我实现这一目标的第一步是跟随this tutorial。一切正常,而仅上传单个图像。但是,当我尝试上传多个图像时(只需将上传功能包装成一个循环)。仅上传第一个,有时上传第三个。成功上传的图片永远不会超过两个,并且永远不会上传连续的图片。

要查看此问题,您可以克隆this repo并将文件输入更改为允许多个,并using (FileStream stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite, FileShare.None)) { ... } 循环AppComponent包装。

我尝试将上传功能作为网络工作者的一部分来调用,但没有文件上传。

任何人都可以建议问题可能是什么以及我可以尝试做哪些其他事情来解决我的问题?

编辑

似乎回调在某种程度上可以解决我的问题,但是我觉得我做错了,因为我的代码看起来有点奇怪(对我而言),我可以上传所有图像,但并不是100%一致。失败的次数(超过50%的时间)

  

输入http://127.0.0.1:10000/devstoreaccount1/mySite/IMG_0593.jpg?mytoken&api-version=2017-07-29 500(服务器遇到内部错误。请稍后再试。)

我的代码

this.blob
      .uploadToBlobStorage(accessToken, event.target.files[0]);

编辑后的代码

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

1 个答案:

答案 0 :(得分:0)

使用 Storage Emulator 时,通常会遇到此问题。我向内部团队确认。使用实际的存储帐户不会导致相同的行为。