Angular用FormData传多Blob到Flask后端仅获取最后一个文件的问题

问题根因 #

• 前端逻辑错误：遍历blob地址的循环中，每次迭代都重新执行this.formData = new FormData()创建新的FormData实例，会覆盖上一轮追加的文件，循环结束后实例中仅保留最后一次追加的文件。
• 后端参数配置错误：Flask-RESTX的reqparse默认只会读取同名字段的第一个值，未配置多值接收规则时，无法识别同字段名上传的多个文件。

修复步骤 #

1. 修正前端TS组件逻辑 #

将FormData实例的初始化操作移到循环外部，循环内仅执行文件追加操作，修改后代码如下：

// 循环外初始化一次FormData实例
this.formData = new FormData();
await Promise.all(blobUrls.map(async (blobUrl) => {
  const blob = await fetch(blobUrl).then(fetched => fetched.blob());
  // 仅追加文件，不重复创建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; 
  });

如果需要给每个上传文件指定自定义文件名，可以在append时传入第三个参数：
this.formData.append('file', blob, upload_${Date.now()}.png)

2. 修正Flask后端参数配置 #

给file字段添加action='append'配置，声明该字段接收多个同名字段值，修改后代码如下：

# 添加action='append'支持多文件接收
storage_image_file_request.add_argument('file', location='files', required=True, action='append')

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为列表，包含所有上传的文件对象
        files = args.get('file')

内容的提问来源于stack exchange，提问作者Myat Thiha