如何将多个blob文件作为FormData从角度发送到后端(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);
}));
}