React前端用Axios发送JSON与文件数组到Flask后端的实现方法咨询

前端发送逻辑 #

你原本追加FormData的逻辑是正确的，问题大多出在Axios请求的配置环节：

• 不要手动设置Content-Type请求头，浏览器会自动为FormData生成带唯一边界符的multipart/form-data头，手动设置会导致边界符丢失，后端无法正常解析文件
• 不要对FormData实例做任何序列化操作（如JSON.stringify、qs序列化等），直接将FormData实例作为请求体传入Axios即可

完整前端代码示例 #

let formData = new FormData();
// 追加JSON数据，转成字符串存储
formData.append('data', JSON.stringify(data));

const files = data?.additional_document;
if (Array.isArray(files)) {
  const arrayKey = `additionalFiles`;
  // 循环追加多个同key的文件
  files.forEach(v => {
    formData.append(arrayKey, v);
  });
}

// Axios请求示例（你封装的apiCallToBackEnd需要遵循以下配置规则）
axios.post('/你的接口地址', formData, {
  // 不需要手动加Content-Type，Axios/浏览器会自动处理
  // 可按需添加上传进度监听
  onUploadProgress: progressEvent => {
    const percent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
    console.log('上传进度：' + percent + '%');
  }
}).then(res => {
  getPDF(res);
})

Flask后端读取逻辑 #

核心注意点：读取多文件必须用request.files.getlist()方法，用普通的get()只能拿到数组最后一个文件

完整后端代码示例 #

from flask import Flask, request, jsonify
import json

app = Flask(__name__)
# 配置最大上传大小，示例为16MB，可按需调整
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

@app.route('/你的接口地址', methods=['POST'])
def upload_handler():
    # 读取JSON数据
    json_data_raw = request.form.get('data')
    json_data = json.loads(json_data_raw) if json_data_raw else {}
    
    # 读取文件数组，参数为前端定义的key: additionalFiles
    file_list = request.files.getlist('additionalFiles')
    
    # 遍历处理文件示例
    for file in file_list:
        if file.filename == '':
            continue
        # 保存文件到本地示例，可按需修改存储逻辑
        # file.save(f'./存储路径/{file.filename}')
        # 也可以直接读取二进制内容 file.read()
    
    return jsonify({
        'code': 200,
        'message': '上传成功',
        'received_file_count': len(file_list),
        'received_json_data': json_data
    })

if __name__ == '__main__':
    app.run(debug=True)

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