在瀏覽器中使用js-spark-md5計算文件的MD5
最近開發一個視頻系統，用戶需要把文件上傳到服務器。服務器再上傳到轉碼服務器，編碼為m3u8格式。我覺得客戶端可以直接上傳到轉碼服務器。對轉碼服務器設置了跨域后，客戶端可以直接上傳視頻文件，但是上傳接口需要文件的MD5值，網上找了一個口碑極好的MD5庫 js-spark-md5（據說性能是最牛逼的）
https://github.com/satazor/js-spark-md5
官方的Demo
document.getElementById('file').addEventListener('change', function () {
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
file = this.files[0],
chunkSize = 2097152, // Read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader();
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of', chunks);
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
console.info('computed hash', spark.end()); // Compute hash
}
};
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
看起來似乎有點兒麻煩，主要是對文件進行切片后，依賴fileReader把分配的文件數據讀取為array buffer字節數組。而這個讀取操作是異步的，只有通過監聽fileReader的onload事件來獲取到。這種異步的行為，增加了一點點復雜度。
我想API如果設計成這樣的話，更討人喜歡。（偽代碼）
// 分片大小，1Mb
const CHUNK_SIZE = 1024 * 1024;
// 文件
const file = ....;
// 文件大小
const size = file.size;
// 總分片數量
let totalChunk = Math.ceil(size / CHUNK_SIZE);
// spark 用於計算md5
const spark = new SparkMD5.ArrayBuffer(),
for (let i = 0; i < totalChunk; i ++){
let start = i * CHUNK_SIZE;
let end = ((start + CHUNK_SIZE) >= size) ? size : start + CHUNK_SIZE;
// 分片的文件
let chunk = file.slice(start, end);
// 添加到spark
spark.append(chunk);
}
// 計算出md5
const md5 = spark.end();
我封裝了一個方法，似乎用起來簡單了一丟丟
這個md5方法，傳遞一個file對象和一個chunkSize參數，返回一個 Promise，在then回調中，會把md5以形參的方式傳遞。
/**
* @param file 文件
* @param chunkSize 分片大小
* @returns Promise
*/
function md5(file, chunkSize) {
return new Promise((resolve, reject) => {
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
let chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = function(e) {
spark.append(e.target.result);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
let md5 = spark.end();
resolve(md5);
}
};
fileReader.onerror = function(e) {
reject(e);
};
function loadNext() {
let start = currentChunk * chunkSize;
let end = start + chunkSize;
if (end > file.size){
end = file.size;
}
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
}
測試一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload</title>
</head>
<body>
<input type="file" onchange="change(this);"/>
<!-- spark-md5.js 庫-->
<script type="text/javascript" src="./spark-md5.js"></script>
<script type="text/javascript">
function change(node){
md5(node.files[0], 1024).then(e => {
// 獲取到文件的md5
console.log("md5=" + e);
}).catch(e => {
// 處理異常
console.error(e);
});
}
/**
* 計算文件的MD5
* @param file 文件
* @param chunkSize 分片大小
* @returns Promise
*/
function md5(file, chunkSize) {
return new Promise((resolve, reject) => {
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
let chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
fileReader.onload = function(e) {
spark.append(e.target.result);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
let md5 = spark.end();
resolve(md5);
}
};
fileReader.onerror = function(e) {
reject(e);
};
function loadNext() {
let start = currentChunk * chunkSize;
let end = start + chunkSize;
if (end > file.size){
end = file.size;
}
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
}
</script>
</body>
</html>
最終計算結果，無誤
使用Windows自帶的
certutil對磁盤文件進行MD5計算
