Socket.io客户端传文件服务端接收空对象问题求助

浏览器中的File对象是特殊的Blob子类，其大部分属性无法被JSON序列化（Socket.io默认采用JSON序列化传输数据），直接通过socket.emit发送会导致服务端收到空对象。

需要先将File对象转换为可序列化的数据格式（如ArrayBuffer或Base64字符串），同时携带文件元信息，再进行传输：

客户端修改代码 #

function uploadFileRequest(){
    const file = arguments[0].files[0];
    console.log(file);
    const reader = new FileReader();
    reader.onload = function(e) {
        // 封装文件元信息和二进制数据
        socket.emit('uploadFile', {
            name: file.name,
            type: file.type,
            size: file.size,
            data: e.target.result
        });
    };
    // 读取为ArrayBuffer（适合大文件，传输体积更小）
    reader.readAsArrayBuffer(file);
    // 若需要Base64格式，替换为下面的代码
    // reader.readAsDataURL(file);
}

服务端接收处理 #

根据客户端发送的数据格式，将数据还原为文件：

const fs = require('fs');
socket.on('uploadFile', (filePayload) => {
    console.log(filePayload); // 现在能获取完整的文件信息和数据
    let buffer;
    if (filePayload.data instanceof ArrayBuffer) {
        // 处理ArrayBuffer格式
        buffer = Buffer.from(filePayload.data);
    } else if (typeof filePayload.data === 'string' && filePayload.data.startsWith('data:')) {
        // 处理Base64格式
        const base64Str = filePayload.data.split(',')[1];
        buffer = Buffer.from(base64Str, 'base64');
    }
    // 保存文件到本地
    if (buffer) {
        fs.writeFileSync(filePayload.name, buffer);
    }
});

如果是大文件，建议采用分块传输的方式，避免单次传输过大数据导致性能问题。

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