Angular13向Flask API传文件时API返回空ImmutableMultiDict问题

前端（Angular 13）修正要点 #

1. 正确构建FormData
   不要手动设置Content-Type为multipart/form-data，Angular会自动处理请求边界符，手动设置反而会导致Flask无法解析文件。示例代码：

   onFileSelected(event: any) {
     const file = event.target.files[0];
     const formData = new FormData();
     formData.append('file', file, file.name); // 键名'file'要和后端接收的名称一致
   
     this.http.post('http://你的FlaskAPI地址/upload', formData).subscribe({
       next: res => console.log(res),
       error: err => console.error(err)
     });
   }
   

2. HTML表单配置
   表单需指定enctype="multipart/form-data"，input标签的name属性要和FormData的键名匹配：

   <form enctype="multipart/form-data">
     <input type="file" name="file" (change)="onFileSelected($event)" accept=".txt">
     <button type="button" (click)="onFileSelected($event)">上传</button>
   </form>
   

3. 拦截器检查
   如果项目中有HTTP拦截器，确认它没有篡改multipart/form-data类型请求的头信息，避免破坏请求结构。

后端（Flask）修正要点 #

1. 安全处理文件接收
   必须先检查文件是否存在，避免直接访问request.files['file']引发KeyError，同时确保返回有效响应：

   from flask import Flask, request, jsonify
   from flask_cors import CORS
   
   app = Flask(__name__)
   CORS(app)
   
   @app.route('/upload', methods=['POST'])
   def upload_file():
       # 先校验文件是否存在
       if 'file' not in request.files:
           return jsonify({'error': '未检测到上传文件'}), 400
       file = request.files['file']
       if file.filename == '':
           return jsonify({'error': '文件名不能为空'}), 400
       # 处理txt文件
       if file and file.filename.endswith('.txt'):
           file.save(f'./uploads/{file.filename}')
           return jsonify({'message': '文件上传成功'}), 200
       return jsonify({'error': '仅支持.txt格式文件'}), 400
   

2. 验证请求结构
   在视图函数开头添加日志，确认请求格式是否正确：

   print(request.content_type)  # 正常应显示 multipart/form-data; boundary=xxxxxx
   print(request.files)
   

3. 依赖版本兼容
   Python 3.7建议搭配Flask 2.x系列版本，确保flask和flask-cors版本适配，避免解析逻辑异常。

额外排查步骤 #

• 用Postman直接发送multipart类型请求测试Flask接口，若Postman能成功接收文件，说明问题出在Angular前端代码。
• 打开浏览器开发者工具的Network标签，查看请求的FormData是否包含文件，以及请求头的Content-Type是否带正确的边界符。

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