JS向Flask API发送FormData但API接收数据为空的解决问询

问题根源 #

你在JS请求里手动设置了Content-Type: multipart/form-data，但FormData作为请求体时，浏览器会自动生成包含boundary分隔符的正确Content-Type，手动设置的头缺少boundary，导致Flask无法解析表单数据。

修复步骤 #

1. 修改JS代码，移除手动设置的Content-Type
   调整后的JS代码：

   const formData = new FormData();
   formData.append('textData', 'somestring');
   formData.append('file', File object);
   const request = {
         method: "POST",
         body: formData
         // 删掉headers里的Content-Type设置
       };
   const response = await fetch('http://localhost:8001/upload_files', request);
   

2. 完善Flask代码的必要导入与接收逻辑
   确保导入了request和cross_origin，并优化数据获取代码：

   from flask import Flask, request
   from flask_cors import cross_origin
   
   app = Flask(__name__)
   
   @app.route('/upload_files', methods=['POST'])
   @cross_origin()
   def upload_files():
       # 获取文本字段
       text_data = request.form.get('textData')
       # 获取文件
       uploaded_file = request.files.get('file')
       
       print(f"收到的文本数据: {text_data}")
       if uploaded_file:
           print(f"收到的文件名: {uploaded_file.filename}")
       else:
           print("未收到文件")
       
       return "上传成功", 200
   
   if __name__ == '__main__':
       app.run(debug=True, host='localhost', port=8001)
   

3. 额外检查项

   • 确认JS中的File object是有效的File实例，可以用console.log(file)打印验证
   • 确保已安装flask-cors：执行pip install flask-cors

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