基於 ThinkJS 的文件上傳（普通上傳，文件預覽，壓縮上傳，分片上傳）

具體實現參見：demo

實現原理簡介

上傳：
FormData + ajax

文件預覽

canvas 讀取生成 image

壓縮圖片上傳：

原理

canvas.toDataURL實現壓縮

實現

FileReader讀取文件內容轉爲img --> canvas讀取img --> 輸出壓縮後的img --> 轉爲 Blob 對象上傳

分片上傳：

原理

利用 file.slice 將文件分片

實現

• 客戶端：文件分片 --> 將分片上傳 --> 完成全部分片上傳 --> 通知服務端合併文件
• 服務端：接收分片 --> 存儲同組分片 --> 接收客戶端合併請求 --> 合併並存儲文件 --> 刪除分片

• 注意點：

  • 分片分組：這裏我在前端將同一組的分片的 file.name 設置成同一個uuid，這樣後端將同一組的分片 存到同一個臨時文件夾中
  • 分片順序：前端會帶一個 order 參數，後端會生成文件名爲 ${order}-${uuid} 名稱的分片，這樣合併文件的時候會直接按順序合併