el-upload 上传前计算文件的 MD5

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

获取要上传的文件

使用el-upload的beforeUpload方法

beforeUpload:上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <el-upload
            ref="upload"
            :action="postIP"
            :limit="1"
            :onError="uploadError"
            :onSuccess="uploadSuccess"
            :beforeUpload="beforeUpload"
        >
    <el-button slot="trigger" size="small" type="primary">选取人员信息 EXCEL 文件上传</el-button>
    </el-upload>

获取文件

    beforeUpload(file) {
        return utils.calcMd5(file).then(res => {
            return Promise.resolve();
            } else {
            return Promise.reject();
            }
        });

获取到文件以后调用计算 md5 的函数,计算成功返回Promise.resolve(),文件进行上传,否则返回Promise.reject(),文件不上传.
计算文件的 md5 值是一个比较耗时的操作,为了保证计算完文件的 md5 值以后再上传文件,calcMd5()中也使用了 promise.

计算文件的 md5 值

文件分割

考虑到上传的文件可能很大,所以将文件分割.

1
2
3
4
5
6
//分割文件同时考虑到浏览器的兼容性
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
//每份文件 2MB
chunkSize = 2097152,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0

调用 sparkMd5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.log("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();

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    calcMd5(file) {
    return new Promise((resolve, reject) => {
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        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
        resolve([true, spark.end()]);
        }
    };
    fileReader.onerror = function() {
        reject("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();
    });
}

 beforeUpload(file) {
  return utils.calcMd5(file).then(res => {
    if (res[0]) {
      console.log(res[1]) //计算完的 md5 值

     
      return Promise.resolve();
    } else {
      return Promise.reject();
    }
  });
thank u !