使用 REST PUT 从 Angular 8 将大型视频 (8GB) 上传到 Azure Blob 存储

Question

我一直在尝试许多不同的方法来将非常大的视频文件 (8GB) 放入 Azure 存储容器中。

我采用的解决方案是使用 Azure Storage REST API 从 Angular 8 组件直接上传。

这适用于较小的文件，但是当我尝试上传 8GB 文件时，它始终以大约 8% 的速度失败，并出现以下错误：

我不确定我错过了什么。这是我的代码：

component.ts

  onFileChange(event) {
     this.currentFile = event.target.files[0];
     this.upload();
  }


  upload() {
    this.uploading = true;
    this.percentComplete = 1;
    let url = this.uploadUrl.split('?');
    let uploadUrl = url[0] + '/' + this.currentFile.name + '?' + url[1];

    const req = new HttpRequest('PUT', uploadUrl, this.currentFile, {
      reportProgress: true,
      headers: new HttpHeaders({ 'x-ms-blob-type': 'BlockBlob' })
    });

    this.http.request(req).subscribe(event => {
      // Via this API, you get access to the raw event stream.
      // Look for upload progress events.
      if (event.type === HttpEventType.UploadProgress) {
        // This is an upload progress event. Compute and show the % done:
        let percentDone = Math.round((100 * event.loaded) / event.total);
        if (percentDone === 0) {
          percentDone = 1;
        }
        console.log(event.loaded + ' of ' + event.total);
        this.percentComplete = percentDone;
      } else if (event instanceof HttpResponse) {
        this.uploading = false;
        if (event.status === 201) {

          this.successEventHandler(event);
        }
      }
    });
  }

html

<input [promiseBtn]="uploading" (change)="onFileChange($event)" id="fileAttachmentBtn" name="file-attachment" type="file" class="file-attachment-btn__label" />

Answer 1

首先，我建议您使用 Azure Storage SDK for Node.JS。 SDK 将为您处理所有工作。以下是一些示例供您参考：https://github.com/Azure/azure-storage-node/tree/master/examples

那么，如果您仍想使用 REST API 上传 blob，那么您需要：

1。将整个文件读取为字节，并在代码中将文件分成更小的部分。

• 每件可能需要 8 MB。

2。使用Put Block API 上传每件作品。

• 在每个请求中，它都包含一个 blockid。

3。使用 Put Block List API 组成 blob。

• 在这个请求中，你需要将body中的所有blockid按顺序排列。