如何取消 Azure Blob 上传（多个文件）

Question

Azure blob 服务允许我们传递可用于取消上传的取消过滤器（例如：How to cancel an upload started with BlobService.createBlockBlobFromBrowserFile?）。它适用于单个上传，但不适用于客户端尝试上传多个文件的情况。问题是取消过滤器是服务本身的属性，而不是单个上传，因此取消一个上传会取消所有上传。有没有办法（通过打字稿/JavaScript 客户端）取消一个上传，同时让其他人不受干扰？

Answer 1

包azure-storage 是旧版。现在微软建议客户使用新的 sdk V12 @azure/storage-blob。如果您使用新的 SDK，我们可以使用AbortController 取消一项操作。更多详情请参考here。

例如（我在 Angular 应用程序中测试它）

1. 安装 Azure 存储 SDK

npm install @azure/storage-blob @azure/abort-controller

1. 在 polyfills.ts 中添加以下代码

(window as any).global = window;
(window as any).process = require( 'process' );
(window as any).Buffer = require( 'buffer' ).Buffer;

1. HTML

<label class="btn btn-default">
  <input type="file"
       id="file"
       multiple
       (change)="onFileChange($event)">
</label>


<div *ngFor="let item of fileInfos" class="mb-2">
  <span>{{ item.file.name }}</span>
  <div class="progress">
    <div
      class="progress-bar progress-bar-info progress-bar-striped"
      role="progressbar"
      attr.aria-valuenow=" {{ item.value }}"
      aria-valuemin="0"
      aria-valuemax="100"
      [ngStyle]="{ width: item.value + '%' }"
    >
      {{ item.value }}%
    </div>
  </div>

  <button class="btn btn-primary"  (click)='item.upload()'>upload</button>
  <button class="btn btn-primary"  (click)='item.cancel()'>cancel</button>

</div>

4. 定义FileInfo calss

import {AbortController} from '@azure/abort-controller'
import {BlobServiceClient,AnonymousCredential} from  '@azure/storage-blob'

export class FileInfo{

    file : File
    value=0
    private  controller = new AbortController()
    constructor(message: File) {
        this.file = message;
      }

    async upload(){
        try {
            
        const blobServiceClient= new BlobServiceClient('https://<accountNmae>.blob.core.windows.net/?<sas token>',
new AnonymousCredential)

        const containerClient= blobServiceClient.getContainerClient('<>') 
        const blob= containerClient.getBlockBlobClient(this.file.name)
        console.log(`start uploading file ${this.file.name}`)
        const total =this.file.size
        await blob.uploadData(this.file,{
            abortSignal: this.controller.signal,
            blobHTTPHeaders:{blobContentType: this.file.type},
            blockSize: 4*1024*1024,
            onProgress : (ev) =>{
                console.log(`You have uploaded ${ev.loadedBytes} bytes`);
                this.value=Math.round(100 * ev.loadedBytes/ total);
            }
        })
        console.log(` upload file ${this.file.name} successfully`)
        } catch (error) {
            console.log(`cannot upload file ${this.file.name}, it return error ${error}`)
        }
        
    }

    cancel(){
        this.controller.abort()
        console.log(`cancel uploading file ${this.file.name}`) 
    }
}

5. 组件

...
fileInfos: Array<FileInfo> =[]
  onFileChange(event:any) {
   this.fileInfos=[]
    for (var i = 0; i < event.target.files.length; i++) { 
        var file =event.target.files[i]
       
        this.fileInfos.push( new FileInfo(file))
      }
  }

Answer 2

我能够通过创建多个取消过滤器并仅取消与该文件上传相关联的特定取消过滤器来使其工作。