Flask 后端收到 SocketIO 空 FormData

Question

我正在尝试通过 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" }

后端接收事件

{'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)

为什么事件处理程序中缺少有效负载？

更新：

在 Chrome 中，我只收到

{}

，在 Firefox 中

{'payload': {}}

UPD2： 数据为空的原因是FE上的FormData在

append()

之后为空。是什么导致了这种行为？

Answer 1

要通过套接字发送多个数据（包括文件），您可以使用嵌套结构。

以下示例向您展示了一种可能的变体，其中

file

（如上面提到的教程中所示）对应于作为输入元素的 FileList 中的第一个元素的文件。

socket.emit('submit', 
    { 
        num1: numbers.num1, 
        num2: numbers.num2, 
        file: { 
            name: file.name, 
            type: file.type, 
            size: file.size, 
            data: file 
        }
    }
);

在服务器端，您会得到一个字典，其中包含文件的字节数据。