时间戳

首页 > 解决方案 > 在Angular 6的for循环中一次上传文件

angular - 在Angular 6的for循环中一次上传文件

问题描述

我正在尝试在 Angular 中上传所有选定的文件。我创建了一个将文件作为表单数据传递给某个 api 的服务。

onFileSelected(event: EventEmitter<File[]>) {
    for (let i = 0; i < this.uploader.queue.length; i++) {

      this.uploadedPercentage = 0;
      let fileItem = this.uploader.queue[i]._file;
      let f: FileDetail = { file: null, status: "", comment: "", uploadDate: new Date };
      f.file = fileItem;
      f.status = "init";

      if (fileItem.size / 1024 / 1024 / 1024 <= 1) {
        this.uploadFile(f, i);
      }
      else {
        f.status = "error";
        f.comment = "Maximum 1GB is allowed";
        this.uploadedFiles.push(f);
      }
    }
  }

uploadFile(file: FileDetail, index: number) {
    let data = new FormData();
    data.append('file', file.file);
    data.append('filename', file.file.name);
    var httpSubscriber : Subscription = this.service.uploadFileData(data).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          break;
        case HttpEventType.Response:
          file.status = "Uploaded";
          return true;
          break;
        case 1: {
          if (Math.round(this.uploadedPercentage) !== Math.round(event['loaded'] / event['total'] * 100)) {
            this.uploadedPercentage = event['loaded'] / event['total'] * 100;
          }
          file.status = "Uploading";
          break;
        }
      }
    });
  }

问题：我想一个一个上传文件并显示每个文件的进度。如果您在我的示例中看到这里，我已经使用 for 循环来上传所有文件并调用this.uploadFile实际将文件转换为多部分并调用服务的方法。但由于它是异步方法，它不会等待响应（显然），它会一起开始上传文件。我想一个一个地上传这个文件并显示每个项目的进度。

标签： angularfile-uploadsynchronization

解决方案

您可以使用async/await等待Observable完成。

首先，制作uploadFile方法async。然后操作就完成了await。uploadFileData请注意，uploadFileDataobservable 被转换为Promise.

onFileSelected(event: EventEmitter<File[]>) {
    for (let i = 0; i < this.uploader.queue.length; i++) {
         ...

      if (fileItem.size / 1024 / 1024 / 1024 <= 1) {
        this.uploadFile(f, i);
      }

      ...

    }
  }

async uploadFile(file: FileDetail, index: number) {
    ...

    await this.service.uploadFileData(data).toPromise().then((event: HttpEvent<any>) => {
      switch (event.type) {
        ...
      }
    });
  }

我在这里创建的一个小 stackblitz 项目：https ://stackblitz.com/edit/angular-pmbbfx

推荐阅读