我如何等待文件上传，以便我可以使用参数上传下一张图片

Question

我正在使用拖放文件上传多张图片。

ngx-file-drop

如何使用异步等待来上传图片，因为我想将参数发送到从第一个请求返回的下一张图片。

从第一个请求返回的post_id 应该与所有下一个图像一起发送。

这是正在做的事情，但它没有等待：

dropped(files: NgxFileDropEntry[]) {
    this.files = files;
    for (const droppedFile of files) {

      // Is it a file?
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file(async (file: File) => {
          // Here you can access the real file
          console.log(droppedFile.relativePath, file);

          await new Promise((resolve, reject) => {
            this.http.uploadImages(file, 'UploadImage', this.postId).subscribe((res: any) => {
              if (res.status == true) {
                resolve(true);
                this.postId = res.data.post_id; // i want to send this ID in next request. 
              } else {
                reject();
                console.log(res.message);
              }
            })
          });


        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.log(droppedFile.relativePath, fileEntry);
      }
    }
  }

Answer 1

[你可以使用这个特性：

public paramsArray = [
  {
    param1: '1',
    param2:  2
  },
  {
    param1: '3',
    param2:  4
  }
]

public subject: BehaviorSubject<any> = new BehaviorSubject<null>;

construnctor() {
  this.subject.asObservable().subscribe((value) => {
    if (value) {
      this.http.uploadImage(value).subscribe((res) => {
        if (this.paramsArray.length) {
          this.subject.next(paramsArray.splice(0, 1)[0]);
        }
      });
    }
  });
}

startUploading() {
  this.subject.next(this.paramsArray.splice(0, 1)[0]);
}

从paramsArray的索引0开始，依次上传。

Answer 2

我想对于要上传的第一张照片，您有一个 postId 存储在 this.postId 变量中。我们将使用那个来上传第一张照片，然后引入第二个变量来保存上传方法返回的post_id。

我们使用Observable 而不是Promise，因为众所周知，无论何时实例化它们，promise 都会被执行，这不是我们想要的。我们还使用concat 来确保所有文件都将被一一上传。

private photoPostId: number | null = null;

dropped(files: NgxFileDropEntry[]) {
  this.files = files;

  const tasks = files.map((droppedFile) => {
    return new Observable<number>((subscriber) => {
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file(async (file: File) => {
          // Here you can access the real file
          console.log(droppedFile.relativePath, file);

          this.http
            .uploadImages(
              file,
              'UploadImage',
              this.photoPostId ?? this.postId
            )
            .subscribe((res: any) => {
              if (res.status == true) {
                subscriber.next(res.data.post_id); // i want to send this ID in next request.
              }
            });
        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.log(droppedFile.relativePath, fileEntry);
      }
      subscriber.complete();
    });
  });

  concat(...tasks).subscribe((postId) => {
    this.photoPostId = postId;
  });
}

Answer 3

如果您正在寻找有关如何使用 Ngx-file-drop 获取文件的解决方案，这就是适合我的解决方案。

伪代码

• 获取droppedItems
• 过滤文件
• 创建可观察的流
• 获取文件并执行所需的操作

代码

dropped(files: NgxFileDropEntry[]) {
    const droppedFileList = files.filter((droppedFile) => droppedFile.fileEntry.isFile);

    const subscription = new Subscription();

    subscription.add(
      from([droppedFileList])
        .pipe(
          switchMap((array) => {
            console.log('array', array);
            const result = array?.map((droppedFile) => {
              const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
              const promise = new Promise((res) => {
                fileEntry.file((file) => res(file));
              })
              return from(promise);
            })

            return forkJoin(result);            
         })
        )
        .subscribe({
          next: (fileList) => console.log('fileList',fileList),
          error:(err)=> console.error(err)
          complete: () => subscription.unsubscribe()
        });
}

**For API calls**

dropped(files: NgxFileDropEntry[]) {
    const droppedFileList = files.filter((droppedFile) => droppedFile.fileEntry.isFile);

    const subscription = new Subscription();

    subscription.add(
      from([droppedFileList])
        .pipe(
          switchMap((array) => {
            console.log('array', array);
            const result = array?.map((droppedFile) => {
              const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
              const promise = new Promise((res) => {
                fileEntry.file((file) => res(file));
              })
              return from(promise);
            })

            return forkJoin(result);            
         }),
         switchMap((fileList) => apiFn(fileList))
        )
        .subscribe({
          next: (resp) => console.log('resp',resp),
          error:(err)=> console.error(err)
          complete: () => subscription.unsubscribe()
        });
}

apiFn(result){
  const calls = result.map(file => apiServiceFn(file));
  return forkJoin([...calls]);
}

您可以在此处了解有关 ForkJoin 的更多信息 - https://rxjs.dev/api/index/function/forkJoin