React前端使用Axios向Flask后端发送含File对象的JSON数据问题问询

根本原因 #

JSON 格式本身不支持二进制文件类型，所以你没法直接发送包含原生File对象的JSON结构，你之前遇到的两个问题都是这个限制导致的：

• 直接往FormData里塞整个JS对象时，JS会自动调用对象的toString()方法，变成[object Object]字符串，后端自然无法解析
• 直接序列化包含File对象的结构时，File对象会被序列化为空对象

最优解决方案：正确使用 FormData 传输 #

不需要拆分用户信息和文件，直接按字段对应填充FormData即可，无需额外做ID映射，后端可以直接一一对应拿到所有字段和文件：

前端代码示例

const formData = new FormData();
// 按你需要的结构填充字段，单个用户场景如下
formData.append('name', '用户姓名');
formData.append('address', '用户地址');
// 直接传入文件对象，不要做序列化处理
formData.append('resume', document.querySelector('#resume-input').files[0]);

// 多用户场景下也可以保持对应关系，示例：
// formData.append('users[0].name', '用户1姓名');
// formData.append('users[0].address', '用户1地址');
// formData.append('users[0].resume', 用户1的File对象);
// formData.append('users[1].name', '用户2姓名');
// formData.append('users[1].address', '用户2地址');
// formData.append('users[1].resume', 用户2的File对象);

// 注意：*不要手动设置Content-Type为multipart/form-data*，浏览器会自动生成带boundary分隔符的请求头，手动设置会丢失分隔符导致解析失败
fetch('/submit-user', {
  method: 'POST',
  body: formData
})

Flask 后端解析代码

from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-user', methods=['POST'])
def submit_user():
    # 单个用户场景直接取值即可，完全对应你需要的结构
    name = request.form.get('name')
    address = request.form.get('address')
    resume_file = request.files.get('resume')
    
    # 拿到文件后可以直接操作，比如保存到本地
    if resume_file:
        resume_file.save(f'./resumes/{name}_简历.pdf')
    
    # 多用户场景解析示例
    # user_list = []
    # index = 0
    # while True:
    #     current_name = request.form.get(f'users[{index}].name')
    #     if not current_name:
    #         break
    #     user_info = {
    #         'name': current_name,
    #         'address': request.form.get(f'users[{index}].address'),
    #         'resume': request.files.get(f'users[{index}].resume')
    #     }
    #     user_list.append(user_info)
    #     index += 1

    return {'status': 'success', 'msg': '数据接收完成'}

备选方案：文件转Base64嵌入JSON #

如果确实需要完全用JSON格式传输，可以把文件转成Base64字符串放到resume字段中，适合文件体积不大的场景（Base64编码会让数据体积增加约33%）：

1. 前端将File对象转为Base64字符串后，和其他字段一起序列化发送
2. 后端拿到Base64字符串后解码为二进制即可存储使用

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