>[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 + "上传成功!");
}
}
```
- 跨域问题
- 跨域是什么
- 跨域解决方案
- 从后端解决
- nginx反向代理
- WebSocket
- websocket是什么
- websocket协议
- 使用场景
- 实现方式
- 注解与html5原生方式
- websocketAPI
- 实现步骤
- 文件上传
- 文件下载
- 广播通信
- 定时推送
- 编程与socketjs方式
- socketjs与stompjs框架
- 实现步骤
- 重载目的地
- SimpMessagingTemplate
- 定时向前端推送数据
- 5种监听事件
- 点对点通信
- 拦截器
- HandshakeInterceptor
- ChannelInterceptor
- poi之excel表格
- 表格版本
- POI常用类
- POI依赖
- 写表格
- 编写表格过程
- 单元格边框样式
- 单元格背景色
- 冻结行或列
- 单元格合并
- 单元格内换行
- 文档内跳转
- 读表格
- Web中的Excel操作
- 导出表格
- 读取表格
- poi之word文档
- word版本
- 写word
- 基本使用
- 标题样式
- 添加图片
- EasyExcel表格
- EasyExcel是什么
- 与其他Excel工具对比
- EasyExcel依赖
- 读Excel
- 简单读取
- 指定列位置
- 读取多个sheet
- 格式转换
- 多行表头
- 同步读
- 写Excel
- 简单写入
- 单元格样式
- 拦截器
- 列宽
- 冻结行或列
- 合并单元格
- 填充Excel
- SpringSecurity
- SpringSecurity是什么
- 同类型产品对比
- 环境搭建
- 相关概念
- 密码加密
- Web权限控制
- UserDetailsService接口
- 登录认证
- 自定义登录页
- 未授权跳转登录页
- 权限控制
- 自定义403页面
- 权限注解
- 记住我功能
- 注销功能
- CSRF
- CSRF是什么
- CSRF保护演示
- 前后端分离权限控制
- 环境搭建
- 认证实现
- 会话管理
- 动态权限管理
- 微服务权限控制
- 权限控制方案
- SpringBoot整合RabbitMQ
- 整合步骤
- Fanout交换机演示
- Direct交换机演示
- Topic交换机演示
- @RabbitListener方法
- JWT认证与授权
- 环境搭建
- 密码加密
- 认证与授权