如何將多個 blob 文件作為 FormData 從 Angular 發送到后端（python 燒瓶）？

Question

就我而言，我只從表單數據中獲得了最后一張照片。 我希望所有照片都發送到后端。
my.ts.component 文件，

await Promise.all(blobUrls.map(async (blobUrl) => {
      const blob = await fetch(blobUrl).then(fetched => fetched.blob());
      this.formData = new FormData();
      this.formData.append('file', blob);
}));


const { url } = await this.service.uploadFile(this.clientId, this.formData, uuidv4())
  .toPromise().catch(err => {
    this.cliApiService.handleErrorMessage(err);
    throw err; 
  });

在 service.ts 中，

  uploadFile(client_id: string, formData, filename: string): Observable<any> {
    const options = this.generateFormOption(true);
    const queryUri = `${this.apiEndpoint}${this.apiPath}/storage/upload/${client_id}/${filename}`;
    return this.http.post<any[]>(queryUri, formData, options);
  }

在燒瓶中，

 storage_image_file_request.add_argument('file', location='files', required=True)

 class ImageUploadResource(BaseResource):
    @ns_storage.marshal_with(storage_image_url_message)
    def post(self, client_id: str, filename: str):
        args = storage_image_file_request.parse_args()
        files = args.get('file')

我想發送所有 formData，也想獲取燒瓶中的所有 formData。 現在，即使我上傳了兩張照片，我也只能得到一張照片。

Answer 1

通過這樣聲明可以解決我的問題。

export class myComponent implements OnInit {
 formData = new FormData();

 await Promise.all(blobUrls.map(async (blobUrl) => {
      const blob = await fetch(blobUrl).then(fetched => fetched.blob());
      this.formData.append('file', blob);
}));
}