字節跳動面試官：請你實現一個大文件上傳和斷點續傳

時間  2020-01-16
標籤 字節 跳動 面試 請你 實現 個大 文件 上傳 斷點 欄目 快樂工作 简体版
原文   原文鏈接

前言

這段時間面試官都挺忙的，頻頻出如今博客文章標題，雖然我不是特別想蹭熱度，可是實在想不到好的標題了-。-，蹭蹭就蹭蹭 :)javascript

事實上我在面試的時候確實被問到了這個問題，並且是一道在線 coding 的編程題，當時雖然思路正確，惋惜最終也並不算徹底答對前端

結束後花了一段時間整理了下思路，那麼究竟該如何實現一個大文件上傳，以及在上傳中如何實現斷點續傳的功能呢？vue

本文將從零搭建前端和服務端，實現一個大文件上傳和斷點續傳的 demojava

前端：vue element-uinode

服務端：nodejsgit

文章有誤解的地方，歡迎指出，將在第一時間改正，有更好的實現方式但願留下你的評論github

大文件上傳

總體思路

前端

前端大文件上傳網上的大部分文章已經給出瞭解決方案，核心是利用 Blob.prototype.slice 方法，和數組的 slice 方法類似，調用的 slice 方法能夠返回原文件的某個切片web

這樣咱們就能夠根據預先設置好的切片最大數量將文件切分爲一個個切片，而後藉助 http 的可併發性，同時上傳多個切片，這樣從本來傳一個大文件，變成了同時傳多個小的文件切片，能夠大大減小上傳時間面試

另外因爲是併發，傳輸到服務端的順序可能會發生變化，因此咱們還須要給每一個切片記錄順序npm

服務端

服務端須要負責接受這些切片，並在接收到全部切片後合併切片

這裏又引申出兩個問題

  1. 什麼時候合併切片，即切片何時傳輸完成
  2. 如何合併切片

第一個問題須要前端進行配合，前端在每一個切片中都攜帶切片最大數量的信息，當服務端接受到這個數量的切片時自動合併，也能夠額外發一個請求主動通知服務端進行切片的合併

第二個問題，具體如何合併切片呢？這裏可使用 nodejs 的 api fs.appendFileSync，它能夠同步地將數據追加到指定文件，也就是說，當服務端接受到全部切片後，先建立一個最終的文件，而後將全部切片逐步合併到這個文件中

talk is cheap,show me the code，接着咱們用代碼實現上面的思路

前端部分

前端使用 Vue 做爲開發框架，對界面沒有太大要求，原生也能夠，考慮到美觀使用 element-ui 做爲 UI 框架

上傳控件

首先建立選擇文件的控件，監聽 change 事件以及上傳按鈕

<template>
   <div>
    <input type="file" @change="handleFileChange" />
    <el-button @click="handleUpload">上傳</el-button>
  </div>
</template>

<script>
export default {
  data: () => ({
    container: {
      file: null
    }
  }),
  methods: {
     handleFileChange(e) {
      const [file] = e.target.files;
      if (!file) return;
      Object.assign(this.$data, this.$options.data());
      this.container.file = file;
    },
    async handleUpload() {}
  }
};
</script>
複製代碼

請求邏輯

考慮到通用性，這裏沒有用第三方的請求庫，而是用原生 XMLHttpRequest 作一層簡單的封裝來發請求

request({
      url,
      method = "post",
      data,
      headers = {},
      requestList
    }) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        Object.keys(headers).forEach(key =>
          xhr.setRequestHeader(key, headers[key])
        );
        xhr.send(data);
        xhr.onload = e => {
          resolve({
            data: e.target.response
          });
        };
      });
    }
複製代碼

上傳切片

接着實現比較重要的上傳功能，上傳須要作兩件事

  • 對文件進行切片
  • 將切片傳輸給服務端
<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <el-button @click="handleUpload">上傳</el-button>
  </div>
</template>

<script>
+ const LENGTH = 10; // 切片數量

export default {
  data: () => ({
    container: {
      file: null,
+ data: []
    }
  }),
  methods: {
    request() {},
    handleFileChange() {},
+ // 生成文件切片
+ createFileChunk(file, length = LENGTH) {
+ const fileChunkList = [];
+ const chunkSize = Math.ceil(file.size / length);
+ let cur = 0;
+ while (cur < file.size) {
+ fileChunkList.push({ file: file.slice(cur, cur + chunkSize) });
+ cur += chunkSize;
+ }
+ return fileChunkList;
+ },
+ // 上傳切片
+ async uploadChunks() {
+ const requestList = this.data
+ .map(({ chunk，hash }) => {
+ const formData = new FormData();
+ formData.append("chunk", chunk);
+ formData.append("hash", hash);
+ formData.append("filename", this.container.file.name);
+ return { formData };
+ })
+ .map(async ({ formData }) =>
+ this.request({
+ url: "http://localhost:3000",
+ data: formData
+ })
+ );
+ await Promise.all(requestList); // 併發切片
+ },
+ async handleUpload() {
+ if (!this.container.file) return;
+ const fileChunkList = this.createFileChunk(this.container.file);
+ this.data = fileChunkList.map(({ file }，index) => ({
+ chunk: file,
+ hash: this.container.file.name + "-" + index // 文件名 + 數組下標
+ }));
+ await this.uploadChunks();
+ }
  }
};
</script>
複製代碼

當點擊上傳按鈕時，調用 createFileChunk 將文件切片，切片數量經過一個常量 Length 控制，這裏設置爲 10，即將文件分紅 10 個切片上傳

createFileChunk 內使用 while 循環和 slice 方法將切片放入 fileChunkList 數組中返回

在生成文件切片時，須要給每一個切片一個標識做爲 hash，這裏暫時使用文件名 + 下標，這樣後端能夠知道當前切片是第幾個切片，用於以後的合併切片

隨後調用 uploadChunks 上傳全部的文件切片，將文件切片，切片 hash，以及文件名放入 FormData 中，再調用上一步的 request 函數返回一個 proimise，最後調用 Promise.all 併發上傳全部的切片

發送合併請求

這裏使用總體思路中提到的第二種合併切片的方式，即前端主動通知服務端進行合併，因此前端還須要額外發請求，服務端接受到這個請求時主動合併切片

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <el-button @click="handleUpload">上傳</el-button>
  </div>
</template>

<script>
export default {
  data: () => ({
    container: {
      file: null
    },
    data: []
  }),
  methods: {
    request() {},
    handleFileChange() {},
    createFileChunk() {},
    // 上傳切片，同時過濾已上傳的切片
    async uploadChunks() {
      const requestList = this.data
        .map(({ chunk，hash }) => {
          const formData = new FormData();
          formData.append("chunk", chunk);
          formData.append("hash", hash);
          formData.append("filename", this.container.file.name);
          return { formData };
        })
        .map(async ({ formData }) =>
          this.request({
            url: "http://localhost:3000",
            data: formData
          })
        );
      await Promise.all(requestList);
+ // 合併切片
+ await this.mergeRequest();
    },
+ async mergeRequest() {
+ await this.request({
+ url: "http://localhost:3000/merge",
+ headers: {
+ "content-type": "application/json"
+ },
+ data: JSON.stringify({
+ filename: this.container.file.name
+ })
+ });
+ }, 
    async handleUpload() {}
  }
};
</script>
複製代碼

服務端部分

簡單使用 http 模塊搭建服務端

const http = require("http");
const server = http.createServer();

server.on("request", async (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.status = 200;
    res.end();
    return;
  }
});

server.listen(3000, () => console.log("正在監聽 3000 端口"));
複製代碼

接受切片

使用 multiparty 包處理前端傳來的 FormData

在 multiparty.parse 的回調中，files 參數保存了 FormData 中文件，fields 參數保存了 FormData 中非文件的字段

const http = require("http");
const path = require("path");
const fse = require("fs-extra");
const multiparty = require("multiparty");

const server = http.createServer();
+ const UPLOAD_DIR = path.resolve(__dirname, "..", "target"); // 大文件存儲目錄

server.on("request", async (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.status = 200;
    res.end();
    return;
  }

+ const multipart = new multiparty.Form();

+ multipart.parse(req, async (err, fields, files) => {
+ if (err) {
+ return;
+ }
+ const [chunk] = files.chunk;
+ const [hash] = fields.hash;
+ const [filename] = fields.filename;
+ const chunkDir = `${UPLOAD_DIR}/${filename}`;

+ // 切片目錄不存在，建立切片目錄
+ if (!fse.existsSync(chunkDir)) {
+ await fse.mkdirs(chunkDir);
+ }

+ // fs-extra 專用方法，相似 fs.rename 而且跨平臺
+ // fs-extra 的 rename 方法 windows 平臺會有權限問題
+ // https://github.com/meteor/meteor/issues/7852#issuecomment-255767835
+ await fse.move(chunk.path, `${chunkDir}/${hash}`);
+ res.end("received file chunk");
+ });
});

server.listen(3000, () => console.log("正在監聽 3000 端口"));
複製代碼

image-20200110215559194

查看 multiparty 處理後的 chunk 對象，path 是存儲臨時文件的路徑，size 是臨時文件大小，在 multiparty 文檔中提到可使用 fs.rename(因爲我用的是 fs-extra，它的 rename 方法 windows 平臺權限問題，因此換成了 fse.move) 移動臨時文件，即移動文件切片

在接受文件切片時，須要先建立存儲切片的文件夾，因爲前端在發送每一個切片時額外攜帶了惟一值 hash，因此以 hash 做爲文件名，將切片從臨時路徑移動切片文件夾中，最後的結果以下

合併切片

在接收到前端發送的合併請求後，服務端將文件夾下的全部切片進行合併

const http = require("http");
const path = require("path");
const fse = require("fs-extra");

const server = http.createServer();
const UPLOAD_DIR = path.resolve(__dirname, "..", "target"); // 大文件存儲目錄

+ const resolvePost = req =>
+ new Promise(resolve => {
+ let chunk = "";
+ req.on("data", data => {
+ chunk += data;
+ });
+ req.on("end", () => {
+ resolve(JSON.parse(chunk));
+ });
+ });

+ // 合併切片
+ const mergeFileChunk = async (filePath, filename) => {
+ const chunkDir = `${UPLOAD_DIR}/${filename}`;
+ const chunkPaths = await fse.readdir(chunkDir);
+ await fse.writeFile(filePath, "");
+ chunkPaths.forEach(chunkPath => {
+ fse.appendFileSync(filePath, fse.readFileSync(`${chunkDir}/${chunkPath}`));
+ fse.unlinkSync(`${chunkDir}/${chunkPath}`);
+ });
+ fse.rmdirSync(chunkDir); // 合併後刪除保存切片的目錄
+ };

server.on("request", async (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  if (req.method === "OPTIONS") {
    res.status = 200;
    res.end();
    return;
  }

+ if (req.url === "/merge") {
+ const data = await resolvePost(req);
+ const { filename } = data;
+ const filePath = `${UPLOAD_DIR}/${filename}`;
+ await mergeFileChunk(filePath, filename);
+ res.end(
+ JSON.stringify({
+ code: 0,
+ message: "file merged success"
+ })
+ );
+ }

});

server.listen(3000, () => console.log("正在監聽 3000 端口"));
複製代碼

因爲前端在發送合併請求時會攜帶文件名，服務端根據文件名能夠找到上一步建立的切片文件夾

接着使用 fs.writeFileSync 先建立一個空文件，這個空文件的文件名就是切片文件夾名 + 後綴名組合而成，隨後經過 fs.appendFileSync 從切片文件夾中不斷將切片合併到空文件中，每次合併完成後刪除這個切片，等全部切片都合併完畢後最後刪除切片文件夾

至此一個簡單的大文件上傳就完成了，接下來咱們再此基礎上擴展一些額外的功能

顯示上傳進度條

上傳進度分兩種，一個是每一個切片的上傳進度，另外一個是整個文件的上傳進度，而整個文件的上傳進度是基於每一個切片上傳進度計算而來，因此咱們先實現切片的上傳進度

切片進度條

XMLHttpRequest 原生支持上傳進度的監聽，只須要監聽 upload.onprogress 便可，咱們在原來的 request 基礎上傳入 onProgress 參數，給 XMLHttpRequest 註冊監聽事件

// xhr
    request({
      url,
      method = "post",
      data,
      headers = {},
+ onProgress = e => e,
      requestList
    }) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
+ xhr.upload.onprogress = onProgress;
        xhr.open(method, url);
        Object.keys(headers).forEach(key =>
          xhr.setRequestHeader(key, headers[key])
        );
        xhr.send(data);
        xhr.onload = e => {
          resolve({
            data: e.target.response
          });
        };
      });
    }
複製代碼

因爲每一個切片都須要觸發獨立的監聽事件，因此還須要一個工廠函數，根據傳入的切片返回不一樣的監聽函數

在原先的前端上傳邏輯中新增監聽函數部分

// 上傳切片，同時過濾已上傳的切片
    async uploadChunks(uploadedList = []) {
      const requestList = this.data
+ .map(({ chunk,hash,index }) => {
          const formData = new FormData();
          formData.append("chunk", chunk);
          formData.append("hash", hash);
          formData.append("filename", this.container.file.name);
+ return { formData,index };
        })
+ .map(async ({ formData,index }) =>
          this.request({
            url: "http://localhost:3000",
            data: formData，
+ onProgress: this.createProgressHandler(this.data[index]),
          })
        );
      await Promise.all(requestList);
       // 合併切片
      await this.mergeRequest();
    },
    async handleUpload() {
      if (!this.container.file) return;
      const fileChunkList = this.createFileChunk(this.container.file);
      this.data = fileChunkList.map(({ file }，index) => ({
        chunk: file,
+ index,
        hash: this.container.file.name + "-" + index
+ percentage:0
      }));
      await this.uploadChunks();
    }    
+ createProgressHandler(item) {
+ return e => {
+ item.percentage = parseInt(String((e.loaded / e.total) * 100));
+ };
+ }
複製代碼

每一個切片在上傳時都會經過監聽函數更新 data 數組對應元素的 percentage 屬性，以後把將 data 數組放到視圖中展現便可

文件進度條

將每一個切片已上傳的部分累加，除以整個文件的大小，就能得出當前文件的上傳進度，因此這裏使用 Vue 計算屬性

computed: {
       uploadPercentage() {
          if (!this.container.file || !this.data.length) return 0;
          const loaded = this.data
            .map(item => item.size * item.percentage)
            .reduce((acc, cur) => acc + cur);
          return parseInt((loaded / this.container.file.size).toFixed(2));
        }
 }
複製代碼

最終視圖以下

斷點續傳

斷點續傳的原理在於前端/服務端須要記住已上傳的切片，這樣下次上傳就能夠跳過以前已上傳的部分，有兩種方案實現記憶的功能

  • 前端使用 localStorage 記錄已上傳的切片 hash
  • 服務端保存已上傳的切片 hash，前端每次上傳前向服務端獲取已上傳的切片

第一種是前端的解決方案，第二種是服務端，而前端方案有一個缺陷，若是換了個瀏覽器就失去了記憶的效果，因此這裏選取後者

生成 hash

不管是前端仍是服務端，都必需要生成文件和切片的 hash，以前咱們使用文件名 + 切片下標做爲切片 hash，這樣作文件名一旦修改就失去了效果，而事實上只要文件內容不變，hash 就不該該變化，因此正確的作法是根據文件內容生成 hash，因此咱們修改一下 hash 的生成規則

這裏用到另外一個庫 spark-md5，它能夠根據文件內容計算出文件的 hash 值，另外考慮到若是上傳一個超大文件，讀取文件內容計算 hash 是很是耗費時間的，而且會引發 UI 的阻塞，致使頁面假死狀態，因此咱們使用 web-worker 在 worker 線程計算 hash，這樣用戶仍能夠在主界面正常的交互

因爲實例化 web-worker 時，參數是一個 js 文件路徑且不能跨域，因此咱們單首創建一個 hash.js 文件放在 public 目錄下，另外在 worker 中也是不容許訪問 dom 的，但它提供了importScripts 函數用於導入外部腳本，經過它導入 spark-md5

// /public/hash.js
self.importScripts("/spark-md5.min.js"); // 導入腳本

// 生成文件 hash
self.onmessage = e => {
  const { fileChunkList } = e.data;
  const spark = new self.SparkMD5.ArrayBuffer();
  let percentage = 0;
  let count = 0;
  const loadNext = index => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(fileChunkList[index].file);
    reader.onload = e => {
      count++;
      spark.append(e.target.result);
      if (count === fileChunkList.length) {
        self.postMessage({
          percentage: 100,
          hash: spark.end()
        });
        self.close();
      } else {
        percentage += 100 / fileChunkList.length;
        self.postMessage({
          percentage
        });
        // 遞歸計算下一個切片
        loadNext(count);
      }
    };
  };
  loadNext(0);
};
複製代碼

在 worker 線程中，接受文件切片 fileChunkList，利用 FileReader 讀取每一個切片的 ArrayBuffer 並不斷傳入 spark-md5 中，每計算完一個切片經過 postMessage 向主線程發送一個進度事件，所有完成後將最終的 hash 發送給主線程

spark-md5 須要根據全部切片才能算出一個 hash 值，不能直接將整個文件放入計算，不然即便不一樣文件也會有相同的 hash，具體能夠看官方文檔

spark-md5

接着編寫主線程與 worker 線程通信的邏輯

+ // 生成文件 hash（web-worker）
+ calculateHash(fileChunkList) {
+ return new Promise(resolve => {
+ // 添加 worker 屬性
+ this.container.worker = new Worker("/hash.js");
+ this.container.worker.postMessage({ fileChunkList });
+ this.container.worker.onmessage = e => {
+ const { percentage, hash } = e.data;
+ this.hashPercentage = percentage;
+ if (hash) {
+ resolve(hash);
+ }
+ };
+ });
    },
    async handleUpload() {
      if (!this.container.file) return;
      const fileChunkList = this.createFileChunk(this.container.file);
+ this.container.hash = await this.calculateHash(fileChunkList);
      this.data = fileChunkList.map(({ file }，index) => ({
+ fileHash: this.container.hash,
        chunk: file,
        hash: this.container.file.name + "-" + index, // 文件名 + 數組下標
        percentage:0
      }));
      await this.uploadChunks();
    }   
複製代碼

主線程使用 postMessage 給 worker 線程傳入全部切片 fileChunkList，並監聽 worker 線程發出的 postMessage 事件拿到文件 hash

加上顯示計算 hash 的進度條，看起來像這樣

至此前端須要將以前用文件名做爲 hash 的地方改寫爲 workder 返回的這個 hash

服務端則使用 hash 做爲切片文件夾名，hash + 下標做爲切片名，hash + 擴展名做爲文件名，沒有新增的邏輯

文件秒傳

在實現斷點續傳前先簡單介紹一下文件秒傳

所謂的文件秒傳，即在服務端已經存在了上傳的資源，因此當用戶再次上傳時會直接提示上傳成功

文件秒傳須要依賴上一步生成的 hash，即在上傳前，先計算出文件 hash，並把 hash 發送給服務端進行驗證，因爲 hash 的惟一性，因此一旦服務端能找到 hash 相同的文件，則直接返回上傳成功的信息便可

+ async verifyUpload(filename, fileHash) {
+ const { data } = await this.request({
+ url: "http://localhost:3000/verify",
+ headers: {
+ "content-type": "application/json"
+ },
+ data: JSON.stringify({
+ filename,
+ fileHash
+ })
+ });
+ return JSON.parse(data);
+ },
   async handleUpload() {
      if (!this.container.file) return;
      const fileChunkList = this.createFileChunk(this.container.file);
      this.container.hash = await this.calculateHash(fileChunkList);
+ const { shouldUpload } = await this.verifyUpload(
+ this.container.file.name,
+ this.container.hash
+ );
+ if (!shouldUpload) {
+ this.$message.success("秒傳：上傳成功");
+ return;
+ }
     this.data = fileChunkList.map(({ file }, index) => ({
        fileHash: this.container.hash,
        index,
        hash: this.container.hash + "-" + index,
        chunk: file,
        percentage: 0
      }));
      await this.uploadChunks();
    }   
複製代碼

秒傳其實就是給用戶看的障眼法，實質上根本沒有上傳

image-20200109143511277

:)

服務端的邏輯很是簡單，新增一個驗證接口，驗證文件是否存在便可

+ const extractExt = filename =>
+ filename.slice(filename.lastIndexOf("."), filename.length); // 提取後綴名
const UPLOAD_DIR = path.resolve(__dirname, "..", "target"); // 大文件存儲目錄

const resolvePost = req =>
  new Promise(resolve => {
    let chunk = "";
    req.on("data", data => {
      chunk += data;
    });
    req.on("end", () => {
      resolve(JSON.parse(chunk));
    });
  });

server.on("request", async (req, res) => {
  if (req.url === "/verify") {
+ const data = await resolvePost(req);
+ const { fileHash, filename } = data;
+ const ext = extractExt(filename);
+ const filePath = `${UPLOAD_DIR}/${fileHash}${ext}`;
+ if (fse.existsSync(filePath)) {
+ res.end(
+ JSON.stringify({
+ shouldUpload: false
+ })
+ );
+ } else {
+ res.end(
+ JSON.stringify({
+ shouldUpload: true
+ })
+ );
+ }
  }
});
server.listen(3000, () => console.log("正在監聽 3000 端口"));
複製代碼

暫停上傳

講完了生成 hash 和文件秒傳，回到斷點續傳

斷點續傳顧名思義即斷點 + 續傳，因此咱們第一步先實現「斷點」，也就是暫停上傳

原理是使用 XMLHttpRequest 的 abort 方法，能夠取消一個 xhr 請求的發送，爲此咱們須要將上傳每一個切片的 xhr 對象保存起來，咱們再改造一下 request 方法

request({
      url,
      method = "post",
      data,
      headers = {},
      onProgress = e => e,
+ requestList
    }) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.upload.onprogress = onProgress;
        xhr.open(method, url);
        Object.keys(headers).forEach(key =>
          xhr.setRequestHeader(key, headers[key])
        );
        xhr.send(data);
        xhr.onload = e => {
+ // 將請求成功的 xhr 從列表中刪除
+ if (requestList) {
+ const xhrIndex = requestList.findIndex(item => item === xhr);
+ requestList.splice(xhrIndex, 1);
+ }
          resolve({
            data: e.target.response
          });
        };
+ // 暴露當前 xhr 給外部
+ requestList?.push(xhr);
      });
    },
複製代碼

這樣在上傳切片時傳入 requestList 數組做爲參數，request 方法就會將全部的 xhr 保存在數組中了

每當一個切片上傳成功時，將對應的 xhr 從 requestList 中刪除，因此 requestList 中只保存正在上傳切片的 xhr

以後新建一個暫停按鈕，當點擊按鈕時，調用保存在 requestList 中 xhr 的 abort 方法，即取消並清空全部正在上傳的切片

handlePause() {
    this.requestList.forEach(xhr => xhr?.abort());
    this.requestList = [];
}
複製代碼

image-20200109143737924

點擊暫停按鈕能夠看到 xhr 都被取消了

恢復上傳

以前在介紹斷點續傳的時提到使用第二種服務端存儲的方式實現續傳

因爲當文件切片上傳後，服務端會創建一個文件夾存儲全部上傳的切片，因此每次前端上傳前能夠調用一個接口，服務端將已上傳的切片的切片名返回，前端再跳過這些已經上傳切片，這樣就實現了「續傳」的效果

而這個接口能夠和以前秒傳的驗證接口合併，前端每次上傳前發送一個驗證的請求，返回兩種結果

  • 服務端已存在該文件，不須要再次上傳
  • 服務端不存在該文件或者已上傳部分文件切片，通知前端進行上傳，並把已上傳的文件切片返回給前端

因此咱們改造一下以前文件秒傳的服務端驗證接口

const extractExt = filename =>
  filename.slice(filename.lastIndexOf("."), filename.length); // 提取後綴名
const UPLOAD_DIR = path.resolve(__dirname, "..", "target"); // 大文件存儲目錄

const resolvePost = req =>
  new Promise(resolve => {
    let chunk = "";
    req.on("data", data => {
      chunk += data;
    });
    req.on("end", () => {
      resolve(JSON.parse(chunk));
    });
  });
  
+ // 返回已經上傳切片名列表
+ const createUploadedList = async fileHash =>
+ fse.existsSync(`${UPLOAD_DIR}/${fileHash}`)
+ ? await fse.readdir(`${UPLOAD_DIR}/${fileHash}`)
+ : [];

server.on("request", async (req, res) => {
  if (req.url === "/verify") {
    const data = await resolvePost(req);
    const { fileHash, filename } = data;
    const ext = extractExt(filename);
    const filePath = `${UPLOAD_DIR}/${fileHash}${ext}`;
    if (fse.existsSync(filePath)) {
      res.end(
        JSON.stringify({
          shouldUpload: false
        })
      );
    } else {
      res.end(
        JSON.stringify({
          shouldUpload: true，
+ uploadedList: await createUploadedList(fileHash)
        })
      );
    }
  }
});
server.listen(3000, () => console.log("正在監聽 3000 端口"));
複製代碼

接着回到前端，前端有兩個地方須要調用驗證的接口

  • 點擊上傳時，檢查是否須要上傳和已上傳的切片
  • 點擊暫停後的恢復上傳，返回已上傳的切片

新增恢復按鈕並改造原來上傳切片的邏輯

<template>
  <div id="app">
      <input
        type="file"
        @change="handleFileChange"
      />
       <el-button @click="handleUpload">上傳</el-button>
       <el-button @click="handlePause" v-if="isPaused">暫停</el-button>
+ <el-button @click="handleResume" v-else>恢復</el-button>
      //...
    </div>
</template>

+ async handleResume() {
+ const { uploadedList } = await this.verifyUpload(
+ this.container.file.name,
+ this.container.hash
+ );
+ await this.uploadChunks(uploadedList);
    },
    async handleUpload() {
      if (!this.container.file) return;
      const fileChunkList = this.createFileChunk(this.container.file);
      this.container.hash = await this.calculateHash(fileChunkList);

+ const { shouldUpload, uploadedList } = await this.verifyUpload(
        this.container.file.name,
        this.container.hash
      );
      if (!shouldUpload) {
        this.$message.success("秒傳：上傳成功");
        return;
      }

      this.data = fileChunkList.map(({ file }, index) => ({
        fileHash: this.container.hash,
        index,
        hash: this.container.hash + "-" + index,
        chunk: file，
        percentage: 0
      }));

+ await this.uploadChunks(uploadedList);
    },
   // 上傳切片，同時過濾已上傳的切片
+ async uploadChunks(uploadedList = []) {
      const requestList = this.data
+ .filter(({ hash }) => !uploadedList.includes(hash))
        .map(({ chunk, hash, index }) => {
          const formData = new FormData();
          formData.append("chunk", chunk);
          formData.append("hash", hash);
          formData.append("filename", this.container.file.name);
          formData.append("fileHash", this.container.hash);
          return { formData, index };
        })
        .map(async ({ formData, index }) =>
          this.request({
            url: "http://localhost:3000",
            data: formData,
            onProgress: this.createProgressHandler(this.data[index]),
            requestList: this.requestList
          })
        );
      await Promise.all(requestList);
      // 以前上傳的切片數量 + 本次上傳的切片數量 = 全部切片數量時
      // 合併切片
+ if (uploadedList.length + requestList.length === this.data.length) {
         await this.mergeRequest();
+ }
    }
複製代碼

image-20200109144331326

這裏給原來上傳切片的函數新增 uploadedList 參數，即上圖中服務端返回的切片名列表，經過 filter 過濾掉已上傳的切片，而且因爲新增了已上傳的部分，因此以前合併接口的觸發條件作了一些改動

到這裏斷點續傳的功能基本完成了

進度條改進

雖然實現了斷點續傳，但還須要修改一下進度條的顯示規則，不然在暫停上傳/接收到已上傳切片時的進度條會出現誤差

切片進度條

因爲在點擊上傳/恢復上傳時，會調用驗證接口返回已上傳的切片，因此須要將已上傳切片的進度變成 100%

async handleUpload() {
      if (!this.container.file) return;
      const fileChunkList = this.createFileChunk(this.container.file);
      this.container.hash = await this.calculateHash(fileChunkList);
      const { shouldUpload, uploadedList } = await this.verifyUpload(
        this.container.file.name,
        this.container.hash
      );
      if (!shouldUpload) {
        this.$message.success("秒傳：上傳成功");
        return;
      }
      this.data = fileChunkList.map(({ file }, index) => ({
        fileHash: this.container.hash,
        index,
        hash: this.container.hash + "-" + index,
        chunk: file,
+ percentage: uploadedList.includes(index) ? 100 : 0
      }));
      await this.uploadChunks(uploadedList);
    },
複製代碼

uploadedList 會返回已上傳的切片，在遍歷全部切片時判斷當前切片是否在已上傳列表裏便可

文件進度條

以前說到文件進度條是一個計算屬性，根據全部切片的上傳進度計算而來，這就遇到了一個問題

點擊暫停會取消並清空切片的 xhr 請求，此時若是已經上傳了一部分，就會發現文件進度條有倒退的現象

當點擊恢復時，因爲從新建立了 xhr 致使切片進度清零，因此總進度條就會倒退

解決方案是建立一個「假」的進度條，這個假進度條基於文件進度條，但只會中止和增長，而後給用戶展現這個假的進度條

這裏咱們使用 Vue 的監聽屬性

data: () => ({
+ fakeUploadPercentage: 0
  }),
  computed: {
    uploadPercentage() {
      if (!this.container.file || !this.data.length) return 0;
      const loaded = this.data
        .map(item => item.size * item.percentage)
        .reduce((acc, cur) => acc + cur);
      return parseInt((loaded / this.container.file.size).toFixed(2));
    }
  },  
  watch: {
+ uploadPercentage(now) {
+ if (now > this.fakeUploadPercentage) {
+ this.fakeUploadPercentage = now;
+ }
    }
  },
複製代碼

當 uploadPercentage 即真的文件進度條增長時，fakeUploadPercentage 也增長，一旦文件進度條後退，假的進度條只需中止便可

至此一個大文件上傳 + 斷點續傳的解決方案就完成了

總結

大文件上傳

  • 前端上傳大文件時使用 Blob.prototype.slice 將文件切片，併發上傳多個切片，最後發送一個合併的請求通知服務端合併切片
  • 服務端接收切片並存儲，收到合併請求後使用 fs.appendFileSync 對多個切片進行合併
  • 原生 XMLHttpRequest 的 upload.onprogress 對切片上傳進度的監聽
  • 使用 Vue 計算屬性根據每一個切片的進度算出整個文件的上傳進度

斷點續傳

  • 使用 spark-md5 根據文件內容算出文件 hash
  • 經過 hash 能夠判斷服務端是否已經上傳該文件，從而直接提示用戶上傳成功（秒傳）
  • 經過 XMLHttpRequest 的 abort 方法暫停切片的上傳
  • 上傳前服務端返回已經上傳的切片名，前端跳過這些切片的上傳

源代碼

源代碼增長了一些按鈕的狀態，交互更加友好，文章表達比較晦澀的地方能夠跳轉到源代碼查看

file-upload

謝謝觀看 :)

字節跳動 EA（Enterprise Application）前端團隊招人啦～

座標上海/北京，校招社招都有，hc 無上限，有興趣的歡迎投遞簡歷至 1996yeyan@gmail.com，校招內推碼 Q7QUGMV

參考資料

寫給新手前端的各類文件上傳攻略，從小圖片到大文件斷點續傳

Blob.slicedeveloper.mozilla.org/zh-CN/docs/…)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程