SocketIO传输FormData至Flask后端为空的问题排查

尝试通过SocketIO传输包含文件的表单值，前端代码如下：

const handleSubmit = () => {
    const formData = new FormData();

    formData.append('num1', numbers.num1);
    formData.append('num2', numbers.num2);
    formData.append('file', file);

    socket.emit('submit', {payload: formData});
};

console.log显示numbers.num1、numbers.num2、file的值为1、1、File { name: "data.zip", lastModified: 1691230842633, webkitRelativePath: "", size: 1196056, type: "application/x-zip-compressed" }，但Flask后端的事件处理函数收到的数据为{'payload': {}}。

后端代码如下：

app = Flask(__name__)
socketio = SocketIO(app)
CORS(app)

socketio.init_app(
app,
cors_allowed_origins="*",
logger=True,
engineio_logger=True)


@socketio.on('submit')
def handle_submit(data):
...


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

为何事件处理器接收的payload为空？

• 更新：Chrome中仅收到{}，Firefox中收到{'payload': {}}
• 更新2：数据为空的原因是前端append操作后FormData仍为空，请问是什么导致了这种情况？

核心原因 #

1. FormData无法被JSON序列化：SocketIO默认用JSON格式传输数据，但FormData是浏览器专属对象，JSON序列化时会直接将其转为空对象{}，这就是后端收到空payload的关键原因。
2. FormData的不可枚举特性：直接console.log(formData)会显示空对象，但这不代表数据没添加成功。FormData的内部属性是不可枚举的，需要通过formData.get('key')或遍历formData.entries()才能查看实际内容。

可行解决方法 #

方法1：转普通对象传输（仅适用于无文件场景）

如果不需要传文件，可以把FormData转为普通JS对象后发送：

const handleSubmit = () => {
    const formData = new FormData();
    formData.append('num1', numbers.num1);
    formData.append('num2', numbers.num2);

    // 转换为普通对象
    const payload = Object.fromEntries(formData.entries());
    socket.emit('submit', { payload });
};

方法2：利用SocketIO二进制支持传输文件

SocketIO支持直接传输二进制数据，可以拆分普通数据和文件分别发送：

const handleSubmit = async () => {
    // 先发送表单元数据
    socket.emit('submit-meta', { num1: numbers.num1, num2: numbers.num2 });
    
    // 将文件转为ArrayBuffer后发送
    const fileBuffer = await file.arrayBuffer();
    socket.emit('submit-file', fileBuffer, { filename: file.name });
};

后端对应处理两个事件：

@socketio.on('submit-meta')
def handle_meta(meta_data):
    num1 = meta_data.get('num1')
    num2 = meta_data.get('num2')
    # 处理元数据逻辑

@socketio.on('submit-file')
def handle_file(file_buffer, kwargs):
    filename = kwargs['filename']
    # 保存文件到本地
    with open(filename, 'wb') as f:
        f.write(file_buffer)

方法3：改用HTTP POST传输FormData（文件传输更稳妥）

如果不是必须使用SocketIO，传统的HTTP POST是处理带文件表单的成熟方案：

const handleSubmit = () => {
    const formData = new FormData();
    formData.append('num1', numbers.num1);
    formData.append('num2', numbers.num2);
    formData.append('file', file);

    fetch('/submit-form', {
        method: 'POST',
        body: formData
    });
};

后端用Flask路由接收：

@app.route('/submit-form', methods=['POST'])
def submit_form():
    num1 = request.form.get('num1')
    num2 = request.form.get('num2')
    file = request.files.get('file')
    # 处理数据和文件
    return '提交成功'

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