>[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認證與授權
- 環境搭建
- 密碼加密
- 認證與授權