原文:https://juejin.cn/post/7118671489615790094
實現文件上傳,大文件,以及如何斷點續傳等技術實現細節,我會每個細節,每個代碼都寫出來,一起調試,一起跟着步驟一一實現。
大文件上傳技術要點分析
技術要點分析:
e6
文件對象,ajax
上傳,async await promise
,後臺文件存儲,流操作(寫入到服務器裏面去)。一個文件傳統上傳
8M
,現在文件上傳一般很大的文件,就要考慮切片問題,實現大文件上傳。js
在es6
文件對象file node stream
有所增強。任何文件都是二進制,分隔blob
(文件的一種類型)。一個大的文件可以分解爲從哪個位置開始
start
,每一塊多小size,offset
。http
請求,n
個切片可以併發上傳。核心利用Blob.prototype.slice
方法,調用的slice
方法可以返回 原文件的某個切片。(速度更快,改善了體驗)預先設置好的切片最大數量將文件切分爲一個個切片,然後藉助
http
的可併發性,同時上傳多個切片,這樣從原本傳一個大文件,變成了同時傳多個小的文件切片,可以大大減少上傳時間。由於是併發,傳輸到服務器的順序可能會發生變化,所以我們還需要給每個切片記錄順序。(前端的切片上傳,讓
http
併發帶來上傳大文件的快感。
大文件上傳前端
創建big_file_upload
目錄文件,初始化node
的項目:npm init -y
,生成package.json
文件。創建file_slice.html
文件,模擬文件上傳,切片的過程,以及說明代碼的意義。
live-server
啓動一下我們本地的服務器,它是npm
的一個包,可以下載npm i -g live-server
。也可以下載vs code
裏live server
插件。啓動.html
文件。
file_slice文件
file_slice.html
代碼:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="file">
<script>
document.getElementById('file')
.addEventListener('change', (event) => { const file = event.target.files[0]; // es6 文件對象
// console.log(file);
// console.log(Object.prototype.toString.call(file)); // [object File]
// console.log(Object.prototype.toString.call(file.slice(0, 102400))); // [object Blob]
let cur = 0, size = 1024*1024; // 1M
// blob等待上傳的對象,所有的切片上傳完
const fileChunkList = []; // blob數組
while(cur < file.size) {
fileChunkList.push({ // cur start offset end
file: file.slice(cur, cur + size)
});
cur += size;
} console.log(fileChunkList)
}) </script>
</body></html>
file.slice
完成切片,blob
類型文件切片,js
二進制文件類型的blob
協議。在文件上傳到服務器之前就可以提前預覽。
返回文檔最後修改的日期和時間 lastModified: xxxx891269598
返回文檔最後修改的日期和時間 lastModifiedDate: Tue Feb 15 xxxx 10:14:29 GMT+0800 (中國標準時間) {}
名字 name: "JavaScript高級程序設計(第4版).pdf"大小 size: 14355650類型 type: "application/pdf"網絡工具包相對路徑 webkitRelativePath: ""
size: 102400type: ""[[Prototype]]: Blob
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {file: Blob}1: {file: Blob}2: {file: Blob}3: {file: Blob}4: {file: Blob}5: {file: Blob}6: {file: Blob}7: {file: Blob}8: {file: Blob}9: {file: Blob}10: {file: Blob}11: {file: Blob}12: {file: Blob}13: {file: Blob}length: 14
Blob.slice
Blob.slice()
方法用於創建一個包含源 Blob
的指定字節範圍內的數據的新 Blob
對象。
返回值
一個新的 Blob
對象,它包含了原始 Blob
對象的某一個段的數據。
blob文件
同目錄下創建 blob.html
文件,代碼:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="" alt="" id="pic" width="350px">
<input type="file" id="file" />
<script>
// es6 file對象 blob blob:// 在文件上傳解決的問題。
// 傳統es5時代文件只有上傳到服務器後,靜態服務提供一個遠程地址給我們,才能夠看到我們上傳的這張圖片。
// es6在本地客戶端操作文件的能力 file對象。
// blob 協議在本地就把它立馬顯示出來,配上上傳進度,更好的用戶體驗。
document.getElementById('file').addEventListener('change', (e) => { const file = e.target.files[0]; const URL = window.URL; const objectUrl = URL.createObjectURL(file); console.log(objectUrl); const pic = document.getElementById('pic');
pic.src = objectUrl;
pic.onload = function() {
URL.revokeObjectURL(objectUrl); // 協議地址 釋放
}
}) </script>
</body></html>
預覽效果:
思路步驟
切片,target
目標後端文件下以名字爲目錄的文件;服務器端,如惡化將這些切片,合併成一個,並且顯示原來的圖片,對於服務器端node
流 stream
的概念。
開始在big_file_upload
文件下創建server
目錄,初始化一下npm init -y
,生成package.json
文件,添加一下我們的入口文件,index.js
文件。
創建文件目錄:
說明:server
後端服務,target
存儲文件,某文件下等
server
目錄下的index.js
文件代碼:
const path = require('path'); // 路徑const fse = require('fs-extra'); // fs擴展包// 上傳目錄const UPLOAD_DIR = path.resolve(__dirname, ".", "target"); // server/target// console.log(UPLOAD_DIR);const filename = 'da';const filePath = path.resolve(UPLOAD_DIR, '..', `${filename}.mp3`); // 路徑console.log(filePath); // 根目錄下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) => { // console.log(filePath, filename, size)
// 大文件上傳時,設計後端思想時每個要上傳的文件,先以文件名,
// 爲target目錄名,把分文件blob,放入這個目錄
// 文件blob上傳前要加上index
// node 文件合併肯定可以的,stream
const chunkDir = path.resolve(UPLOAD_DIR, filename); // console.log(chunkDir);
const chunkPaths = await fse.readdir(chunkDir); // console.log(chunkPaths); // 路徑下的數組文件名
chunkPaths.sort((a, b) => a.split('-')[1] - b.split('-')[1]); // console.log(chunkPaths, '++');
// 每塊內容寫入最後的文件,promise
await Promise.all(
chunkPaths.map((chunkPath, index) =>
pipeStream( // 迴流的方法
path.resolve(chunkDir, chunkPath),
fse.createWriteStream(filePath, { start: index * size, end: (index + 1) * size
})
)
)
) // console.log('文件合併成功');
fse.rmdirSync(chunkDir); // 刪除}
mergeFileChunk(filePath, filename, 0.5*1024*1024);
fs
提供文件的讀寫,刪除,文件的移動,文件的目錄,文件的目錄查看等等yarn add fs-extra
yarn global add nodemon
stream
流可讀流,可寫流
chunk
都是一個二進制流文件Promise.all
來包裝每個chunk
的寫入start end
fse createWriteStream
每個
chunk
寫入 先創建可讀流,再pipe
給可寫流的過程。
思路:以原文件做爲文件夾的名字,在上傳blobs
到這個文件夾,前且每個blob
都以文件-index
的命名方式來存儲。
http併發上傳大文件切片
修改file_slice.html
文件:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="file">
<script>
// 請求封裝
// http併發文件上傳 blob上傳 chunk POST
// 當blob Promise.All 再發送一個merge的請求 /merge
function request({
url,
method = 'POST',
data,
headers = {},
requestList // 上傳的文件列表
}) { return new Promise(resolve => { const xhr = new XMLHttpRequest(); // js ajax 對象
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
})
}
})
} document.getElementById('file')
.addEventListener('change', async (event) => { const file = event.target.files[0]; // es6 文件對象
// console.log(file);
const file_name = file.name.split('.')[0]; // console.log(Object.prototype.toString.call(file)); // [object File]
// console.log(Object.prototype.toString.call(file.slice(0, 102400))); // [object Blob]
let cur = 0, size = 1024*1024; // 1M
// blob等待上傳的對象,所有的切片上傳完
const fileChunkList = []; // blob數組
while(cur < file.size) {
fileChunkList.push({ // cur start offset end
file: file.slice(cur, cur + size)
});
cur += size;
} console.log(fileChunkList) const requestList = fileChunkList.map(({file}, index) => { // 請求的數組
const formData = new FormData(); // js post form
formData.append('chunk', file);
formData.append('filename', `${file_name}-${index}`); return {
formData
};
})
.map(async ({ formData }) => request({ url: 'http://localhost:3000', // 前後端的api
data: formData
})) await Promise.all(requestList); // 併發吧
// console.log(requestList);
}) </script>
</body></html>
server
目錄下,創建main.js
文件,處理提交:
下載
yarn add multiparty
const http = require('http');const path = require('path');const multiparty = require('multiparty');const fse = require('fs-extra');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", "*"); // res.end("hello");
if (req.url == '/') { // chunk, name
const multipart = new multiparty.Form(); // console.log(multipart)
multipart.parse(req, async (err, fields, files) => { if (err) { return;
} // console.log(files);
const [chunk] = files.chunk; // 拿到了文件塊
const [filename] = fields.filename; // 文件名
// 塊名
// console.log(filename);
const dir_name = filename.split('-')[0]; const chunkDir = path.resolve(UPLOAD_DIR, dir_name); if (!fse.existsSync(chunkDir)) { await fse.mkdirs(chunkDir)
} // chunk.path
// 把chunk放入目錄
await fse.move(chunk.path, `${chunkDir}/${filename}`);
})
} else if (req.url == '/merge/') { // 合併
res.end('OK');
}
})
server.listen(3000, () => console.log('正在監聽3000端口'))
Form { _writableState: WritableState { objectMode: false, highWaterMark: 16384, finalCalled: false, needDrain: false, ending: false, ended: false, finished: false, destroyed: false, decodeStrings: true, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function: bound onwrite], writecb: null, writelen: 0, afterWriteTickInfo: null, buffered: [], bufferedIndex: 0, allBuffers: true, allNoop: true, pendingcb: 0, prefinished: false, errorEmitted: false, emitClose: false, autoDestroy: true, errored: null, closed: false
}, _events: [Object: null prototype] { newListener: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, error: null, autoFields: false, autoFiles: false, maxFields: 1000, maxFieldsSize: 2097152, maxFilesSize: Infinity, uploadDir: 'C:\\Users\\xxx\\xxx\\Local\\xxx', encoding: 'utf8', bytesReceived: 0, bytesExpected: null, openedFiles: [], totalFieldSize: 0, totalFieldCount: 0, totalFileSize: 0, flushing: 0, backpressure: false, writeCbs: [], emitQueue: [],
[Symbol(kCapture)]: false}
斷點續傳
服務器端返回,告知我從那開始
瀏覽器端自行處理
緩存處理
在切片上傳的
axios
成功回調中,存儲已上傳成功的切片在切片上傳前,先看下
localstorage
中是否存在已上傳的切片,並修改uploaded
構造切片數據時,過濾掉
uploaded
爲true
的
垃圾文件清理
前端在localstorage設置緩存時間,超過時間就發送請求通知後端清理碎片文件,同時前端也要清理緩存。
前後端都約定好,每個緩存從生成開始,只能存儲12小時,12小時後自動清理
爲每個文件切割塊添加不同的標識,
hash
當上傳成功後,記錄上傳成功的標識
當我們暫停或者發送失敗後,可以重新發送沒有上傳成功的切割文件
創建vue項目:vue create vue-upload-big-file
.
$ vue --version
@vue/cli 4.5.13vue create vue-upload-big-file
$ vue create vue-upload-big-file
? Please pick a preset: (Use arrow keys)
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with (Use arrow
? Choose a version of Vue.js that you want to start the project with 2.x
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n
yarn add element-ui
在main.js
中引入element-ui
,代碼如下:
import Vue from 'vue
import App from './App.vue'
import ElementUI from 'element-uiimport 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);
Vue.config.productionTip = falsenew Vue({ render: h => h(App),
}).$mount('#app')
App.vue
代碼清理如下:
<template> <div id="app">
</div></template><script>export default { name: 'app', components: {
}
}</script>
App.vue
代碼實現:
async calculateHash (fileChunkList) { return new Promise(resolve => { // 需要花時間的任務
// web workers
// js 單線程的 UI 線程
// html5 web workers 單獨開一個線程 獨立於 worker
// 回調
this.container.worker = new Worker('/hash.js'); this.container.worker.postMessage({ fileChunkList }); this.container.worker.onmessage = e => { console.log(e.data);
}
})
}async handleUpload (e) { // 大量的任務
if (!this.container.file) return; this.status = Status.uploading; const fileChunkList = this.createFileCHunk(this.container,file); this.container.hash = await this.calculateHash(fileChunkList);
}
createFileCHunk (file, size = SIZE) { const fileChunkList = []; let cur = 0; while (cur < file.size) {
fileChunkList.push({ file: file.slice(cur, cur + size)
});
cur += size;
} return fileChunkList;
}handleFileChange(e) { // 分隔文件
const [ file ] = e.target.files; // 拿到第一個文件
// console.log(e.target.files);
this.container.file = file;
}
無論時前端還是後端,要考慮傳輸文件,特別是大文件,有可能發生丟失文件的情況,網速卡頓,服務器超時,如何避免丟失的情況。hash
當點擊上傳按鈕時候,調用createFileChunk
將文件進行切片,切片數量通過文件大小控制,這裏設置默認值大小,進行默認值大小的進行切片
createFileChunk
內使用while
循環和slice
方法將切片放入fileChunkList
數組中返回
在生成文件切片時,需要給每個切片一個標識作爲hash
,這裏使用文件名+下標,這樣後端可以知道切片是第幾個切片,用於之後的合併切片
FormData.append()
發送數據用到了 FormData
formData.append(name, value, filename)
,其中 filename
爲可選參數,是傳給服務器的文件名稱, 當一個 Blob 或 File
被作爲第二個參數的時候, Blob
對象的默認文件名是 "blob"
。
什麼叫hash呢
什麼叫hash
呢?文件名,並不是唯一的,1.jpg
圖片,1.jpg
圖片,或 2.jpg
圖片 一樣的內容。- 不同名的圖片,內容是一樣的。針對文件內容進行 hash
計算。丟失重傳。
隨後調用uploadChunks
上傳所有的文件切片,將文件切片,切片hash
,以及文件名放入FormData
中,再調用上一步的 request
函數返回一個 promise
,最後調用 Promise.all
併發上傳所有的切片
spark-md5.min.js
:
(function(factory){if(typeof exports==="object"){module.exports=factory()}else if(typeof define==="function"&&define.amd){define(factory)}else{var glob;try{glob=window}catch(e){glob=self}glob.SparkMD5=factory()}})(function(undefined){"use strict";var add32=function(a,b){return a+b&4294967295},hex_chr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];function cmn(q,a,b,x,s,t){a=add32(add32(a,q),add32(x,t));return add32(a<<s|a>>>32-s,b)}function md5cycle(x,k){var a=x[0],b=x[1],c=x[2],d=x[3];a+=(b&c|~b&d)+k[0]-680876936|0;a=(a<<7|a>>>25)+b|0;d+=(a&b|~a&c)+k[1]-389564586|0;d=(d<<12|d>>>20)+a|0;c+=(d&a|~d&b)+k[2]+606105819|0;c=(c<<17|c>>>15)+d|0;b+=(c&d|~c&a)+k[3]-1044525330|0;b=(b<<22|b>>>10)+c|0;a+=(b&c|~b&d)+k[4]-176418897|0;a=(a<<7|a>>>25)+b|0;d+=(a&b|~a&c)+k[5]+1200080426|0;d=(d<<12|d>>>20)+a|0;c+=(d&a|~d&b)+k[6]-1473231341|0;c=(c<<17|c>>>15)+d|0;b+=(c&d|~c&a)+k[7]-45705983|0;b=(b<<22|b>>>10)+c|0;a+=(b&c|~b&d)+k[8]+1770035416|0;a=(a<<7|a>>>25)+b|0;d+=(a&b|~a&c)+k[9]-1958414417|0;d=(d<<12|d>>>20)+a|0;c+=(d&a|~d&b)+k[10]-42063|0;c=(c<<17|c>>>15)+d|0;b+=(c&d|~c&a)+k[11]-1990404162|0;b=(b<<22|b>>>10)+c|0;a+=(b&c|~b&d)+k[12]+1804603682|0;a=(a<<7|a>>>25)+b|0;d+=(a&b|~a&c)+k[13]-40341101|0;d=(d<<12|d>>>20)+a|0;c+=(d&a|~d&b)+k[14]-1502002290|0;c=(c<<17|c>>>15)+d|0;b+=(c&d|~c&a)+k[15]+1236535329|0;b=(b<<22|b>>>10)+c|0;a+=(b&d|c&~d)+k[1]-165796510|0;a=(a<<5|a>>>27)+b|0;d+=(a&c|b&~c)+k[6]-1069501632|0;d=(d<<9|d>>>23)+a|0;c+=(d&b|a&~b)+k[11]+643717713|0;c=(c<<14|c>>>18)+d|0;b+=(c&a|d&~a)+k[0]-373897302|0;b=(b<<20|b>>>12)+c|0;a+=(b&d|c&~d)+k[5]-701558691|0;a=(a<<5|a>>>27)+b|0;d+=(a&c|b&~c)+k[10]+38016083|0;d=(d<<9|d>>>23)+a|0;c+=(d&b|a&~b)+k[15]-660478335|0;c=(c<<14|c>>>18)+d|0;b+=(c&a|d&~a)+k[4]-405537848|0;b=(b<<20|b>>>12)+c|0;a+=(b&d|c&~d)+k[9]+568446438|0;a=(a<<5|a>>>27)+b|0;d+=(a&c|b&~c)+k[14]-1019803690|0;d=(d<<9|d>>>23)+a|0;c+=(d&b|a&~b)+k[3]-187363961|0;c=(c<<14|c>>>18)+d|0;b+=(c&a|d&~a)+k[8]+1163531501|0;b=(b<<20|b>>>12)+c|0;a+=(b&d|c&~d)+k[13]-1444681467|0;a=(a<<5|a>>>27)+b|0;d+=(a&c|b&~c)+k[2]-51403784|0;d=(d<<9|d>>>23)+a|0;c+=(d&b|a&~b)+k[7]+1735328473|0;c=(c<<14|c>>>18)+d|0;b+=(c&a|d&~a)+k[12]-1926607734|0;b=(b<<20|b>>>12)+c|0;a+=(b^c^d)+k[5]-378558|0;a=(a<<4|a>>>28)+b|0;d+=(a^b^c)+k[8]-2022574463|0;d=(d<<11|d>>>21)+a|0;c+=(d^a^b)+k[11]+1839030562|0;c=(c<<16|c>>>16)+d|0;b+=(c^d^a)+k[14]-35309556|0;b=(b<<23|b>>>9)+c|0;a+=(b^c^d)+k[1]-1530992060|0;a=(a<<4|a>>>28)+b|0;d+=(a^b^c)+k[4]+1272893353|0;d=(d<<11|d>>>21)+a|0;c+=(d^a^b)+k[7]-155497632|0;c=(c<<16|c>>>16)+d|0;b+=(c^d^a)+k[10]-1094730640|0;b=(b<<23|b>>>9)+c|0;a+=(b^c^d)+k[13]+681279174|0;a=(a<<4|a>>>28)+b|0;d+=(a^b^c)+k[0]-358537222|0;d=(d<<11|d>>>21)+a|0;c+=(d^a^b)+k[3]-722521979|0;c=(c<<16|c>>>16)+d|0;b+=(c^d^a)+k[6]+76029189|0;b=(b<<23|b>>>9)+c|0;a+=(b^c^d)+k[9]-640364487|0;a=(a<<4|a>>>28)+b|0;d+=(a^b^c)+k[12]-421815835|0;d=(d<<11|d>>>21)+a|0;c+=(d^a^b)+k[15]+530742520|0;c=(c<<16|c>>>16)+d|0;b+=(c^d^a)+k[2]-995338651|0;b=(b<<23|b>>>9)+c|0;a+=(c^(b|~d))+k[0]-198630844|0;a=(a<<6|a>>>26)+b|0;d+=(b^(a|~c))+k[7]+1126891415|0;d=(d<<10|d>>>22)+a|0;c+=(a^(d|~b))+k[14]-1416354905|0;c=(c<<15|c>>>17)+d|0;b+=(d^(c|~a))+k[5]-57434055|0;b=(b<<21|b>>>11)+c|0;a+=(c^(b|~d))+k[12]+1700485571|0;a=(a<<6|a>>>26)+b|0;d+=(b^(a|~c))+k[3]-1894986606|0;d=(d<<10|d>>>22)+a|0;c+=(a^(d|~b))+k[10]-1051523|0;c=(c<<15|c>>>17)+d|0;b+=(d^(c|~a))+k[1]-2054922799|0;b=(b<<21|b>>>11)+c|0;a+=(c^(b|~d))+k[8]+1873313359|0;a=(a<<6|a>>>26)+b|0;d+=(b^(a|~c))+k[15]-30611744|0;d=(d<<10|d>>>22)+a|0;c+=(a^(d|~b))+k[6]-1560198380|0;c=(c<<15|c>>>17)+d|0;b+=(d^(c|~a))+k[13]+1309151649|0;b=(b<<21|b>>>11)+c|0;a+=(c^(b|~d))+k[4]-145523070|0;a=(a<<6|a>>>26)+b|0;d+=(b^(a|~c))+k[11]-1120210379|0;d=(d<<10|d>>>22)+a|0;c+=(a^(d|~b))+k[2]+718787259|0;c=(c<<15|c>>>17)+d|0;b+=(d^(c|~a))+k[9]-343485551|0;b=(b<<21|b>>>11)+c|0;x[0]=a+x[0]|0;x[1]=b+x[1]|0;x[2]=c+x[2]|0;x[3]=d+x[3]|0}function md5blk(s){var md5blks=[],i;for(i=0;i<64;i+=4){md5blks[i>>2]=s.charCodeAt(i)+(s.charCodeAt(i+1)<<8)+(s.charCodeAt(i+2)<<16)+(s.charCodeAt(i+3)<<24)}return md5blks}function md5blk_array(a){var md5blks=[],i;for(i=0;i<64;i+=4){md5blks[i>>2]=a[i]+(a[i+1]<<8)+(a[i+2]<<16)+(a[i+3]<<24)}return md5blks}function md51(s){var n=s.length,state=[1732584193,-271733879,-1732584194,271733878],i,length,tail,tmp,lo,hi;for(i=64;i<=n;i+=64){md5cycle(state,md5blk(s.substring(i-64,i)))}s=s.substring(i-64);length=s.length;tail=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(i=0;i<length;i+=1){tail[i>>2]|=s.charCodeAt(i)<<(i%4<<3)}tail[i>>2]|=128<<(i%4<<3);if(i>55){md5cycle(state,tail);for(i=0;i<16;i+=1){tail[i]=0}}tmp=n*8;tmp=tmp.toString(16).match(/(.*?)(.{0,8})$/);lo=parseInt(tmp[2],16);hi=parseInt(tmp[1],16)||0;tail[14]=lo;tail[15]=hi;md5cycle(state,tail);return state}function md51_array(a){var n=a.length,state=[1732584193,-271733879,-1732584194,271733878],i,length,tail,tmp,lo,hi;for(i=64;i<=n;i+=64){md5cycle(state,md5blk_array(a.subarray(i-64,i)))}a=i-64<n?a.subarray(i-64):new Uint8Array(0);length=a.length;tail=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];for(i=0;i<length;i+=1){tail[i>>2]|=a[i]<<(i%4<<3)}tail[i>>2]|=128<<(i%4<<3);if(i>55){md5cycle(state,tail);for(i=0;i<16;i+=1){tail[i]=0}}tmp=n*8;tmp=tmp.toString(16).match(/(.*?)(.{0,8})$/);lo=parseInt(tmp[2],16);hi=parseInt(tmp[1],16)||0;tail[14]=lo;tail[15]=hi;md5cycle(state,tail);return state}function rhex(n){var s="",j;for(j=0;j<4;j+=1){s+=hex_chr[n>>j*8+4&15]+hex_chr[n>>j*8&15]}return s}function hex(x){var i;for(i=0;i<x.length;i+=1){x[i]=rhex(x[i])}return x.join("")}if(hex(md51("hello"))!=="5d41402abc4b2a76b9719d911017c592"){add32=function(x,y){var lsw=(x&65535)+(y&65535),msw=(x>>16)+(y>>16)+(lsw>>16);return msw<<16|lsw&65535}}if(typeof ArrayBuffer!=="undefined"&&!ArrayBuffer.prototype.slice){(function(){function clamp(val,length){val=val|0||0;if(val<0){return Math.max(val+length,0)}return Math.min(val,length)}ArrayBuffer.prototype.slice=function(from,to){var length=this.byteLength,begin=clamp(from,length),end=length,num,target,targetArray,sourceArray;if(to!==undefined){end=clamp(to,length)}if(begin>end){return new ArrayBuffer(0)}num=end-begin;target=new ArrayBuffer(num);targetArray=new Uint8Array(target);sourceArray=new Uint8Array(this,begin,num);targetArray.set(sourceArray);return target}})()}function toUtf8(str){if(/[\u0080-\uFFFF]/.test(str)){str=unescape(encodeURIComponent(str))}return str}function utf8Str2ArrayBuffer(str,returnUInt8Array){var length=str.length,buff=new ArrayBuffer(length),arr=new Uint8Array(buff),i;for(i=0;i<length;i+=1){arr[i]=str.charCodeAt(i)}return returnUInt8Array?arr:buff}function arrayBuffer2Utf8Str(buff){return String.fromCharCode.apply(null,new Uint8Array(buff))}function concatenateArrayBuffers(first,second,returnUInt8Array){var result=new Uint8Array(first.byteLength+second.byteLength);result.set(new Uint8Array(first));result.set(new Uint8Array(second),first.byteLength);return returnUInt8Array?result:result.buffer}function hexToBinaryString(hex){var bytes=[],length=hex.length,x;for(x=0;x<length-1;x+=2){bytes.push(parseInt(hex.substr(x,2),16))}return String.fromCharCode.apply(String,bytes)}function SparkMD5(){this.reset()}SparkMD5.prototype.append=function(str){this.appendBinary(toUtf8(str));return this};SparkMD5.prototype.appendBinary=function(contents){this._buff+=contents;this._length+=contents.length;var length=this._buff.length,i;for(i=64;i<=length;i+=64){md5cycle(this._hash,md5blk(this._buff.substring(i-64,i)))}this._buff=this._buff.substring(i-64);return this};SparkMD5.prototype.end=function(raw){var buff=this._buff,length=buff.length,i,tail=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],ret;for(i=0;i<length;i+=1){tail[i>>2]|=buff.charCodeAt(i)<<(i%4<<3)}this._finish(tail,length);ret=hex(this._hash);if(raw){ret=hexToBinaryString(ret)}this.reset();return ret};SparkMD5.prototype.reset=function(){this._buff="";this._length=0;this._hash=[1732584193,-271733879,-1732584194,271733878];return this};SparkMD5.prototype.getState=function(){return{buff:this._buff,length:this._length,hash:this._hash}};SparkMD5.prototype.setState=function(state){this._buff=state.buff;this._length=state.length;this._hash=state.hash;return this};SparkMD5.prototype.destroy=function(){delete this._hash;delete this._buff;delete this._length};SparkMD5.prototype._finish=function(tail,length){var i=length,tmp,lo,hi;tail[i>>2]|=128<<(i%4<<3);if(i>55){md5cycle(this._hash,tail);for(i=0;i<16;i+=1){tail[i]=0}}tmp=this._length*8;tmp=tmp.toString(16).match(/(.*?)(.{0,8})$/);lo=parseInt(tmp[2],16);hi=parseInt(tmp[1],16)||0;tail[14]=lo;tail[15]=hi;md5cycle(this._hash,tail)};SparkMD5.hash=function(str,raw){return SparkMD5.hashBinary(toUtf8(str),raw)};SparkMD5.hashBinary=function(content,raw){var hash=md51(content),ret=hex(hash);return raw?hexToBinaryString(ret):ret};SparkMD5.ArrayBuffer=function(){this.reset()};SparkMD5.ArrayBuffer.prototype.append=function(arr){var buff=concatenateArrayBuffers(this._buff.buffer,arr,true),length=buff.length,i;this._length+=arr.byteLength;for(i=64;i<=length;i+=64){md5cycle(this._hash,md5blk_array(buff.subarray(i-64,i)))}this._buff=i-64<length?new Uint8Array(buff.buffer.slice(i-64)):new Uint8Array(0);return this};SparkMD5.ArrayBuffer.prototype.end=function(raw){var buff=this._buff,length=buff.length,tail=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],i,ret;for(i=0;i<length;i+=1){tail[i>>2]|=buff[i]<<(i%4<<3)}this._finish(tail,length);ret=hex(this._hash);if(raw){ret=hexToBinaryString(ret)}this.reset();return ret};SparkMD5.ArrayBuffer.prototype.reset=function(){this._buff=new Uint8Array(0);this._length=0;this._hash=[1732584193,-271733879,-1732584194,271733878];return this};SparkMD5.ArrayBuffer.prototype.getState=function(){var state=SparkMD5.prototype.getState.call(this);state.buff=arrayBuffer2Utf8Str(state.buff);return state};SparkMD5.ArrayBuffer.prototype.setState=function(state){state.buff=utf8Str2ArrayBuffer(state.buff,true);return SparkMD5.prototype.setState.call(this,state)};SparkMD5.ArrayBuffer.prototype.destroy=SparkMD5.prototype.destroy;SparkMD5.ArrayBuffer.prototype._finish=SparkMD5.prototype._finish;SparkMD5.ArrayBuffer.hash=function(arr,raw){var hash=md51_array(new Uint8Array(arr)),ret=hex(hash);return raw?hexToBinaryString(ret):ret};return SparkMD5});
('/hash.js') // 放在根目錄 public
web workers
優化我們的前端性能,將要花大量時間的,複雜的,放到一個新的線程中去計算,文件上傳通過hash
計算。
hash.js
代碼:
// 通過內容計算md5值self.importScripts('/spark-md5.min.js')
self.onmessage = e => { // self.postMessage({
// "msg": "您好"
// })
const { fileChunkList } = e.data; const spark = new self.SparkMD5.ArrayBuffer(); let percentage = 0; let count = 0; // console.log(fileChunkList, 'worker fileChunkList');
// 計算出hash
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)
} // this 當前的線程
大文件上傳
將大文件轉換爲二進制流的格式
利用流可以切割的屬性,將二進制流切割成多份
組裝和分割塊同等數量的請求塊,並行或串行的形式發出請求
再給服務器端發出一個合併的信息
App.vue
<template> <div id="app">
<div>
<input type="file" :disabled="status !== Status.wait" @change="handleFileChange" />
<el-button @click="handleUpload" :disabled="uploadDisabled">上傳</el-button>
<el-button @click="handleResume" v-if="status === Status.pause">恢復</el-button>
<el-button v-else :disabled="status !== Status.uploading || !container.hash" @click="handlePause">暫停 </el-button>
</div>
<div>
<div>計算文件hash</div>
<el-progress :percentage="hashPercentage"></el-progress>
<div>總進度</div>
<!-- 每個blob 進度 計算出來?
1. 每塊blob 上傳 值percentage 變的, watch
2. 計算屬性 computed -->
<el-progress :percentage="fakeUploadPercentage"></el-progress>
</div>
<!-- 多個切片 -->
<!-- [{a:1}] -->
<el-table :data="data">
<el-table-column prop="hash" label="切片hash" align="center">
</el-table-column>
<el-table-column label="大小(kb)" align="center" width="120">
<template v-slot="{row}">
{{row.size | transformByte}} </template>
</el-table-column>
<el-table-column label="進度" align="center">
<template v-slot="{row}">
<el-progress :percentage="row.percentage" color="#909399">
</el-progress>
</template>
</el-table-column>
</el-table>
</div></template><script>
const SIZE = 10 * 1024 * 1024; // 切片大小
const Status = { wait: "wait", pause: "pause", uploading: "uploading"
}; export default { name: 'app', filters: { transformByte(val) { return Number((val / 1024).toFixed(0))
}
}, computed: { uploadDisabled() { return (
!this.container.file || [Status.pause, Status.uploading].includes(this.status)
);
}, 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;
}
}
}, data: () => ({
Status, container: { file: null, hash: "", worker: null
}, hashPercentage: 0, data: [], requestList: [], status: Status.wait, // 當暫停時會取消 xhr 導致進度條後退
// 爲了避免這種情況,需要定義一個假的進度條
fakeUploadPercentage: 0
}), methods: { async handleResume() { this.status = Status.uploading; const {
uploadedList
} = await this.verifyUpload( this.container.file.name, this.container.hash
) await this.uploadChunks(uploadedList);
}, handlePause() { this.status = Status.pause; // 狀態停
this.resetData();
}, resetData() { this.requestList.forEach(xhr => xhr.abort()) this.requestList = []; if (this.container.worker) { //hash 計算過程中
this.container.worker.onmessage = null;
}
}, // 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 => { // 將請求成功的 xhr 從列表中刪除
if (requestList) { const xhrIndex = requestList.findIndex(item => item === xhr);
requestList.splice(xhrIndex, 1);
}
resolve({ data: e.target.response
});
}; // 暴露當前 xhr 給外部
requestList?.push(xhr);
});
}, async calculateHash(fileChunkList) { return new Promise(resolve => { // 封裝花時間的任務
// web workers
// js 單線程的 UI 主線程
// html5 web workers 單獨開一個線程 獨立於 worker
// 回調 不會影響原來的UI
// html5 帶來的優化,
this.container.worker = new Worker("/hash.js"); this.container.worker.postMessage({
fileChunkList
}); this.container.worker.onmessage = e => { // console.log(e.data);
const {
percentage,
hash
} = e.data; console.log(percentage, '----'); this.hashPercentage = percentage; if (hash) {
resolve(hash);
}
}
})
}, async handleUpload(e) { // 大量的任務
if (!this.container.file) return; this.status = Status.uploading; const fileChunkList = this.createFileChunk(this.container.file); console.log(fileChunkList); this.container.hash = await this.calculateHash(fileChunkList); // 文件 hash 沒必要上傳同一個文件多次
const {
shouldUpload,
uploadedList
} = await this.verifyUpload( //上傳, 驗證
this.container.file.name, this.container.hash
); console.log(shouldUpload, uploadedList); if (!shouldUpload) { this.$message.success("秒傳:上傳成功"); this.status = Status.wait; return;
} this.data = fileChunkList.map(({
file
}, index) => ({ fileHash: this.container.hash, //文件的hash
index, hash: this.container.hash + "-" + index, //每個塊都有自己的index 在內的hash, 可排序, 可追蹤
chunk: file, size: file.size, percentage: uploadedList.includes(index) ? 100 : 0 //當前切片是否已上傳過
})); await this.uploadChunks(uploadedList); //上傳切片
}, // 上傳切片,同時過濾已上傳的切片
async uploadChunks(uploadedList = []) { // console.log(this.data);
// 數據數組this.data => 請求數組 =》 併發
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();
} console.log('可以發送合併請求了');
}, async mergeRequest() { await this.request({ url: 'http://localhost:3000/merge', headers: { "content-type": "application/json"
}, data: JSON.stringify({ size: SIZE, fileHash: this.container.hash, filename: this.container.file.name
})
}) this.$message.success('上傳成功'); this.status = Status.wait;
}, // 用閉包保存每個 chunk 的進度數據
createProgressHandler(item) { return e => {
item.percentage = parseInt(String((e.loaded / e.total) * 100)); console.log(e.loaded, e.total, '----------');
}
}, // 根據 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);
}, // es6的特性你和代碼是如何結合的?少傳這個參數
createFileChunk(file, size = SIZE) { const fileChunkList = []; let cur = 0; while (cur < file.size) {
fileChunkList.push({ file: file.slice(cur, cur + size)
})
cur += size;
} return fileChunkList;
}, handleFileChange(e) { const [file] = e.target.files; if (!file) return; this.resetData(); Object.assign(this.$data, this.$options.data()); this.container.file = file;
},
}, components: {
}
}</script><style>
#app { font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;
}</style>
秒傳
原理:計算整個文件的hash
,在執行上傳操作前,向服務端發送請求,傳遞MD5
值,後端進行文件檢索。若服務器中已存在該文件,便不進行後續的任何操作,上傳也便直接結束。
大文件上傳 + 斷點續傳的解決方案就完成了
總結
前端上傳大文件時使用
Blob.prototype.slice
將文件切片,併發上傳多個切片,最後發送一個合併的請求通知服務端合併切片後端進行合併到最終文件, 原生
XMLHttpRequest
的upload.onprogress
對切片上傳進度的監聽使用
spark-md5
根據文件內容算出文件hash
, 通過hash
可以判斷服務端是否已經上傳該文件,從而直接提示用戶上傳成功(秒傳)前端在計算文件hash時,能否異步並實現進度響應
文件切片使用持久化或者內存存儲導致溢出怎麼辦?
“繼續下載”方案是否還有優化空間?
分片上傳、接收、存儲、合併,這些步驟抽象成一個文件上傳協議是否更理想
上傳狀態由服務端動態獲取,前端只做兩個事:hash和切片。這個前提下,多切片併發上傳、多文件併發上傳,複雜度會提高很多,當然主要是後端複雜度。
源代碼
file-breakpoint-continue
本文同步分享在 博客“掘金-我是哪吒”(CSDN)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。