<form id="3hdj5"></form>

<form id="3hdj5"></form>

        <noframes id="3hdj5"><form id="3hdj5"><nobr id="3hdj5"></nobr></form>

          <form id="3hdj5"></form>

          <noframes id="3hdj5">

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

          13 篇文章 0 訂閱
          14 篇文章 0 訂閱

          前言

          這段時間面試官都挺忙的,頻頻出現在博客文章標題,雖然我不是特別想蹭熱度,但是實在想不到好的標題了-。-,蹭蹭就蹭蹭 😃

          事實上我在面試的時候確實被問到了這個問題,而且是一道在線 coding 的編程題,當時雖然思路正確,可惜最終也并不算完全答對

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

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

          前端:Vue@2 + Element-ui

          服務端:Nodejs@14 + multiparty

          大文件上傳

          整體思路

          前端

          前端大文件上傳網上的大部分文章已經給出了解決方案,核心是利用 Blob.prototype.slice 方法,和數組的 slice 方法相似,文件的 slice 方法可以返回原文件的某個切片

          預先定義好單個切片大小,將文件切分為一個個切片,然后借助 http 的可并發性,同時上傳多個切片。這樣從原本傳一個大文件,變成了并發傳多個小的文件切片,可以大大減少上傳時間

          另外由于是并發,傳輸到服務端的順序可能會發生變化,因此我們還需要給每個切片記錄順序

          服務端

          服務端負責接受前端傳輸的切片,并在接收到所有切片后合并所有切片

          這里又引伸出兩個問題

          1. 何時合并切片,即切片什么時候傳輸完成
          2. 如何合并切片

          第一個問題需要前端配合,前端在每個切片中都攜帶切片最大數量的信息,當服務端接受到這個數量的切片時自動合并?;蛘咭部梢灶~外發一個請求,主動通知服務端進行切片的合并

          第二個問題,具體如何合并切片呢?這里可以使用 Nodejs 的 讀寫流(readStream/writeStream),將所有切片的流傳輸到最終文件的流里

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

          前端部分

          前端使用 Vue 作為開發框架,對界面沒有太大要求,原生也可以,考慮到美觀使用 Element-ui 作為 UI 框架

          上傳控件

          首先創建選擇文件的控件并監聽 change 事件,另外就是上傳按鈕

          <template>
           ? <div>
           ? ?<input type="file" @change="handleFileChange" />
           ? ?<el-button @click="handleUpload">upload</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
           ? ? ? ?  });
           ? ? ?  };
           ? ?  });
           ?  }
          

          上傳切片

          接著實現比較重要的上傳功能,上傳需要做兩件事

          • 對文件進行切片

          • 將切片傳輸給服務端

            ?

          當點擊上傳按鈕時,調用 createFileChunk 將文件切片,切片數量通過文件大小控制,這里設置 10MB,也就是說一個 100 MB 的文件會被分成 10 個 10MB 的切片

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

          在生成文件切片時,需要給每個切片一個標識作為 hash,這里暫時使用文件名 + 下標,這樣后端可以知道當前切片是第幾個切片,用于之后的合并切片

          隨后調用 uploadChunks 上傳所有的文件切片,將文件切片,切片 hash,以及文件名放入 formData 中,再調用上一步的 request 函數返回一個 proimise,最后調用 Promise.all 并發上傳所有的切片

          發送合并請求

          使用整體思路中提到的第二種合并切片的方式,即前端主動通知服務端進行合并

          前端發送額外的合并請求,服務端接受到請求時合并切片

          <template>
            <div>
           ?  <input type="file" @change="handleFileChange" />
           ?  <el-button @click="handleUpload">upload</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(({ 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("listening port 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;
          + ?  // 創建臨時文件夾用于臨時存儲 chunk
          + ?  // 添加 chunkDir 前綴與文件名做區分
          + ?  const chunkDir = path.resolve(UPLOAD_DIR, 'chunkDir' + filename);
          ?
          + ?  if (!fse.existsSync(chunkDir)) {
          + ? ?  await fse.mkdirs(chunkDir);
          + ?  }
          ?
          +    // fs-extra 的 rename 方法 windows 平臺會有權限問題
          + ?  // @see 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("listening port 3000"));
          

          查看 multiparty 處理后的 chunk 對象,path 是存儲臨時文件的路徑,size 是臨時文件大小,在 multiparty 文檔中提到可以使用 fs.rename(這里換成了 fs.remove, 因為 fs-extra 的 rename 方法在 windows 平臺存在權限問題

          在接受文件切片時,需要先創建臨時存儲切片的文件夾,以 chunkDir 作為前綴,文件名作為后綴

          由于前端在發送每個切片時額外攜帶了唯一值 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 pipeStream = (path, writeStream) =>
          +  new Promise(resolve => {
          + ?  const readStream = fse.createReadStream(path);
          + ?  readStream.on("end", () => {
          + ? ?  fse.unlinkSync(path);
          + ? ?  resolve();
          + ?  });
          + ?  readStream.pipe(writeStream);
          +  });
          ?
          // 合并切片
          + const mergeFileChunk = async (filePath, filename, size) => {
          + ? const chunkDir = path.resolve(UPLOAD_DIR, 'chunkDir' + filename);
          + ? const chunkPaths = await fse.readdir(chunkDir);
          + ? // 根據切片下標進行排序
          + ? // 否則直接讀取目錄的獲得的順序會錯亂
          + ? chunkPaths.sort((a, b) => a.split("-")[1] - b.split("-")[1]);
          + ? // 并發寫入文件
          + ? await Promise.all(
          + ? ? chunkPaths.map((chunkPath, index) =>
          + ? ? ? pipeStream(
          + ? ? ? ? path.resolve(chunkDir, chunkPath),
          + ? ? ? ? // 根據 size 在指定位置創建可寫流
          + ? ? ? ? fse.createWriteStream(filePath, {
          + ? ? ? ? ? start: index * size,
          + ? ? ? ? })
          + ? ? ? )
          + ? ? )
          +  );
          +  // 合并后刪除保存切片的目錄
          +  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,size } = data;
          + ? ? const filePath = path.resolve(UPLOAD_DIR, `${filename}`);
          + ? ? await mergeFileChunk(filePath, filename);
          + ? ? res.end(
          + ? ? ? JSON.stringify({
          + ? ? ? ? code: 0,
          + ? ? ? ? message: "file merged success"
          + ? ? ? })
          + ? ? );
          + ? }
          ?
          });
          ?
          server.listen(3000, () => console.log("listening port 3000"));
          

          由于前端在發送合并請求時會攜帶文件名,服務端根據文件名可以找到上一步創建的切片文件夾

          接著使用 fs.createWriteStream 創建一個可寫流,可寫流文件名就是上傳時的文件名

          隨后遍歷整個切片文件夾,將切片通過 fs.createReadStream 創建可讀流,傳輸合并到目標文件中

          值得注意的是每次可讀流都會傳輸到可寫流的指定位置,這是通過 createWriteStream 的第二個參數 start 控制的,目的是能夠并發合并多個可讀流至可寫流中,這樣即使并發時流的順序不同,也能傳輸到正確的位置

          所以還需要讓前端在請求的時候提供之前設定好的 size 給服務端,服務端根據 size 指定可讀流的起始位置

           ? async mergeRequest() {
           ? ?  await this.request({
           ? ? ?  url: "http://localhost:3000/merge",
           ? ? ?  headers: {
           ? ? ? ?  "content-type": "application/json"
           ? ? ?  },
           ? ? ?  data: JSON.stringify({
          + ? ? ? ? size: SIZE,
           ? ? ? ?  filename: this.container.file.name
           ? ? ?  })
           ? ?  });
           ?  },
          

          其實也可以等上一個切片合并完后再合并下個切片,這樣就不需要指定位置,但傳輸速度會降低,所以使用了并發合并的手段

          接著只要保證每次合并完成后刪除這個切片,等所有切片都合并完畢后最后刪除切片文件夾即可

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

          顯示上傳進度條

          上傳進度分兩種,一個是每個切片的上傳進度,另一個是整個文件的上傳進度,而整個文件的上傳進度是基于每個切片上傳進度計算而來,所以我們先實現單個切片的進度條

          單個切片進度條

          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(({ 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 的生成規則

          webpack 的產物 contenthash 也是基于這個思路實現的

          這里用到另一個庫 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
           ? ? ?  });
           ? ? ? ?// calculate recursively
           ? ? ? ?loadNext(count);
           ? ?  }
           ?  };
            };
           ?loadNext(0);
          };
          

          在 worker 線程中,接受文件切片 fileChunkList,利用 fileReader 讀取每個切片的 ArrayBuffer 并不斷傳入 spark-md5 中,每計算完一個切片通過 postMessage 向主線程發送一個進度事件,全部完成后將最終的 hash 發送給主線程

          spark-md5 文檔中要求傳入所有切片并算出 hash 值,不能直接將整個文件放入計算,否則即使不同文件也會有相同的 hash

          接著編寫主線程與 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 的地方改寫為 worker 返回的 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("skip upload:file upload 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();
           ?  } ? 
          

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

          服務端的邏輯非常簡單,新增一個驗證接口,驗證文件是否存在即可

          + // 提取后綴名
          + 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 = path.resolve(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("listening port 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 = [];
          }
          

          點擊暫停按鈕可以看到 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(path.resolve(UPLOAD_DIR, fileHash))
          + ?  ? await fse.readdir(path.resolve(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 = path.resolve(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("listening port 3000"));
          

          接著回到前端,前端有兩個地方需要調用驗證的接口

          • 點擊上傳時,檢查是否需要上傳和已上傳的切片
          • 點擊暫停后的恢復上傳,返回已上傳的切片

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

          <template>
            <div id="app">
           ? ?  <input
           ? ? ?  type="file"
           ? ? ?  @change="handleFileChange"
           ? ?  />
           ? ? ? <el-button @click="handleUpload">upload</el-button>
           ? ? ? <el-button @click="handlePause" v-if="isPaused">pause</el-button>
          + ? ?  <el-button @click="handleResume" v-else>resume</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("skip upload:file upload 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(({ 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();
          + ? ? }
           ?  }
          

          這里給原來上傳切片的函數新增 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("skip upload:file upload 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 將文件切片,并發上傳多個切片,最后發送一個合并的請求通知服務端合并切片
          • 服務端接收切片并存儲,收到合并請求后使用流將切片合并到最終文件
          • 原生 XMLHttpRequest 的 upload.onprogress 對切片上傳進度的監聽
          • 使用 Vue 計算屬性根據每個切片的進度算出整個文件的上傳進度

          斷點續傳

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

          源代碼

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

          file-upload 源碼

          file-upload[這里是圖片018]https://download.csdn.net/download/weixin_42232156/85465685

          謝謝觀看 😃

          評論 3 您還未登錄,請先 登錄 后發表或查看評論
          相關推薦

          “相關推薦”對你有幫助么?

          • 非常沒幫助
          • 沒幫助
          • 一般
          • 有幫助
          • 非常有幫助
          提交
          ??2022 CSDN 皮膚主題:1024 設計師:我叫白小胖 返回首頁

          打賞作者

          m0_67400972

          你的鼓勵將是我創作的最大動力

          ¥2 ¥4 ¥6 ¥10 ¥20
          輸入1-500的整數
          余額支付 (余額:-- )
          掃碼支付
          掃碼支付:¥2
          獲取中
          掃碼支付

          您的余額不足,請更換掃碼支付或充值

          打賞作者

          實付
          使用余額支付
          點擊重新獲取
          掃碼支付
          錢包余額 0

          抵扣說明:

          1.余額是錢包充值的虛擬貨幣,按照1:1的比例進行支付金額的抵扣。
          2.余額無法直接購買下載,可以購買VIP、C幣套餐、付費專欄及課程。

          余額充值
          狠狠激情五月丁香免费视频