🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[warning]提醒:websocket支持上传文件,但不建议这么做。因为websocket一次只能上传小于等于 8192 字节的文件,如果大于这个数字则必须对文件切片,然后一段一段地上传,这样可能会出现文件不完整的情况,导致上传的文件损坏,提示无法打开。特别是对于视频/音频文件常常会出现文件无法打开的情况。 实现步骤如下: **1. 前端代码** ```js var socket = null /** * 上传文件到服务端 */ function upload() { const file = document.getElementById("file").files[0] if (socket == null) { socket = new WebSocket('ws://localhost:8090/v1/upload?filename=' + file.name) } socket.onmessage = (e) => { console.info(e.data) } //每次传递数据大小为1024字节 let sliceSize = 1024 //计算出需要传递多少次 let slices = Math.ceil(file.size / sliceSize) let currentSlice = 0 for (let k = 0; k < slices; ++k) { let start = currentSlice * sliceSize; let end = Math.min((currentSlice + 1) * sliceSize, file.size) ++currentSlice //对文件切片 let blob = file.slice(start, end) const reader = new FileReader() reader.readAsArrayBuffer(blob) reader.onload = (event => { let buffer = event.target.result socket.send(buffer) }) } } ``` **2. 后端代码** ```java @Component @ServerEndpoint(value = "/v1/upload") public class UploadController { @OnMessage public void upload(Session session, byte[] message) throws IOException { //获取查询参数 String query = session.getQueryString(); //FileWriter是 hutool-all 框架提供的一个API FileWriter writer = FileWriter.create(new File("e:/upload/websocket/" + query)); writer.append(message, 0, message.length); //将消息推送到前端 session.getBasicRemote().sendText(query + "上传成功!"); } } ```