🎯目的：

大檔案上傳時，一旦遇到網路不穩或斷線，就會導致檔案需要全部重新上傳，該項目透過Vue3 + Laravel8實現斷點續傳，提供學習及參考！

---

目錄：

1. 安裝說明

2. 系統展示

3. 技術說明

4. 其它補充

5. 未來可優化方向

---

1. 安裝說明：

前端

技術：vue3, vite, spark-md5, element-plus, axios

• use npm：

  npm install
  npm run dev
  

• use yarn：

  yarn install
  yarn dev
  

  (備註：前端預設會連線到後端 localhost:8001（預設） 進行請求，請依照需求進行更改，更改說明放至 3. 技術說明中）

後端

技術：laravel8

• 使用 composer

      composer install
      php artisan serve
  

測試環境

瀏覽器：Chrome96 伺服器：Apache2.4.32 PHP：Vesion 7.4+ 傳輸協議：http1

---

2. 展示

1. 大檔案分割及斷點上傳

2. 後端接收檔案及合併

3. 逐步上傳（大檔）

4. 並行上傳（小檔）

---

3. 技術說明

系統流程圖

後端 API（詳細說明程式碼附註解）

1. hash_check：檢查 Hash 過的檔案是否存在伺服器上
2. chunks_upload：切片檔案上傳
3. chunks_merge：切片檔案全部上傳後進行合併，並刪除所有切片檔案

前端（詳細參閱程式碼附註解）

前端開發環境請求網址修改，Config/index.js：

const EnvConfig = {
    // 開發環境
    dev: {
        baseApi: 'http://localhost:8001/api', <---開發環境請求網址
    },
    // 正式環境
    prod: {
        baseApi: '/api',
    },
}
    

---

4. 其它補充

1. Hash 方式改變

方式一（不採用）：加載每個檔案內容並進行 Hash。

不採用原因：高負載的 CPU，及緩慢的處理進度（以採用現行最快的 Spark-md5 進行處理且有切片，非大檔加載）

（下圖為 CPU 使用率，整個網頁會非常的卡頓）

實際運行

---

方式二（目前採用）：針對檔名進行 Hash 加密

（下圖為改善後）

實際運行

---

5. 未來可優化方向

1. 請求重試功能（當切片上傳失敗時，可再次進行上傳，直到 N 次失敗，提示使用者）
2. 嘗試使用 Http2（Why use? because...Browsers impose a per-domain limit of 6-8 connections when using HTTP/1.1, depending on the browser implementation.With HTTP/2, browsers open only 1 connection per domain. However, thanks to the multiplexing feature of the HTTP/2 protocol, the number of concurrent requests per domain is not limited to 6-8, but it is virtually unlimited.）看看能不能改善請求數量及效率問題（待實驗）
3. more...

---

Reference

• Node + js實現大文件分片上傳基本原理及實踐(一)

• JS 實現大文件併發上傳

• 身為 JS 開發者，你應該要知道的記憶體管理機制

• Expected performance of MD5 calculation in javascript?

• They All Shall Pass: A Guide to Handling Large File Uploads

more...