如何使用Postman在Socket.io的WebSocket请求中发送图片

方案一：Base64 编码传输（新手友好，操作门槛最低） #

该方案无需调整 Postman 复杂配置，仅需少量修改服务端代码即可适配现有校验规则：

• 第一步：将需要发送的图片转为 Base64 编码字符串，可通过本地工具或在线转换工具生成。
• 第二步：打开 Postman 的 Socket.io 请求页，确认服务端地址、Socket.io 版本与服务端一致，点击Connect完成连接。
• 第三步：切换到消息标签页，事件名填写服务端监听的send-message，消息格式选择JSON，填入以下结构的请求参数：

{
    "token": "你的实际鉴权token",
    "socket_id": "当前连接的socket ID",
    "receiver_id": "接收方用户ID",
    "message": "消息文本内容",
    "file": "data:image/png;base64,此处替换为你生成的图片Base64字符串"
}

• 第四步：修改服务端校验逻辑，将 Base64 字符串转为 Laravel 文件实例后再走校验，修改后代码如下：

$socket->on('send-message', function ($data) use ($io, $socket) {
    // 处理Base64格式图片转为上传文件实例
    if (isset($data['file']) && str_starts_with($data['file'], 'data:image')) {
        $fileBase64 = substr($data['file'], strpos($data['file'], ',') + 1);
        $fileBin = base64_decode($fileBase64);
        $fileName = 'tmp_img_' . time() . '.png';
        $tmpFilePath = sys_get_temp_dir() . '/' . $fileName;
        file_put_contents($tmpFilePath, $fileBin);
        $data['file'] = new \Illuminate\Http\UploadedFile($tmpFilePath, $fileName, 'image/png', null, true);
    }

    $validator = Validator::make($data, [
        'token' => 'required',
        'socket_id' => 'required',
        'receiver_id' => 'required',
        'message' => 'required',
        'file' => 'required|file|image'
    ]);

    if ($validator->fails())
        return $io->emit('error', json_encode(['message' => $validator->messages()]));
                    
    // 此处可添加临时文件转存到正式存储目录的逻辑
    return $io->emit('success', json_encode(['message' => 'image uploaded successfully']));
});

• 第五步：点击 Postman 中的Send按钮发送请求，即可收到服务端返回的成功响应。

方案二：二进制直接传输（无需修改服务端代码） #

如果你不想调整服务端逻辑，可以通过 Postman 原生二进制传输功能实现，仅需满足以下条件按步骤操作即可：

• Postman 版本 ≥ v9.0，低版本不支持 Socket.io 混合类型数据传输
• 连接 Socket.io 服务端成功后，在消息页选择消息格式为Binary
• 点击Select File按钮选中本地图片，将token、socket_id等其他参数放到 Socket.io 握手的 auth 字段或者请求查询参数中，同步调整服务端对应字段的获取逻辑即可
• 直接点击发送即可完成请求

内容的提问来源于stack exchange，提问作者Mujeeb Ur Rehman