在vue中获取文件的Md5值
- 1. Md5 是什么？
- 2. 使用插件spark-md5处理
- 3. 获取图片文件的Md5值
- 4. 视频文件的Md5值获取
1. Md5 是什么？
- MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。用于加密数据。
- 原理：MD5码以512位分组来处理输入的信息，且每一分组又被划分为16个32位子分组，经过了一系列的处理后，算法的输出由四个32位分组组成，将这四个32位分组级联后将生成一个128位散列值。
总体流程如下图所示，每次的运算都由前一轮的128位结果值和当前的512bit值进行运算
2. 使用插件spark-md5处理
- 安装
npm install --save spark-md5
- 哪里用哪里引入
import SparkMD5 from "spark-md5";
3. 获取图片文件的Md5值
- 这里的场景是后端需要文件唯一的MD5值，需要前端去计算。
- 后端处理会增加接口时间，同一个上传接口，其它地方又不需要。
- 代码如下：
<el-upload
class="avatar-uploader"
:on-preview="handlePictureCardPreview"
:action="uploadImgUrl"
:on-success="handleSuccess"
:on-error="handleError"
:on-change="fileChange"
:accept="'.img,.png,.jpg,.jpeg'"
:data="uploadImgData"
multiple
>
</el-upload>
- 重点是 fileChange 方法，其余大家应该都看得懂。
- 在文件发生变动的时候，触发此方法。
fileChange(file) {
let fileReader = new FileReader();
let Spark = new SparkMD5.ArrayBuffer();
fileReader.readAsArrayBuffer(file.raw);
fileReader.onload = function (e) {
Spark.append(e.target.result);
let md5 = Spark.end();
console.log(md5);
};
},
- 当你上传文件的时候，在控制台发现了一串这样的字符，那就代表成功了。这就是此图片的唯一Md5值。
4. 视频文件的Md5值获取
- 这里是比较麻烦的，因为格式不一样，网上找了很多资料，都不太对，自己研究了一套。
- template 的代码和上面一样就行，不重新写了，我这里的场景是用的腾讯的视频插件 TXupload，播放加密的，会略有不同。
- 不过不用担心，下面会详细说明。
- 核心方法如下：
async calculateMD5(file) {
return new Promise((resolve, reject) => {
const blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
const chunkSize = 2097152; // 2MB chunks
const chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
fileReader.onload = function (e) {
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
resolve(spark.end());
}
};
fileReader.onerror = function () {
reject("Error reading file");
};
function loadNext() {
const start = currentChunk * chunkSize;
const end =
start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
},
- 此方法用于计算文件的MD5值。
- 需要注意的是，这个方法调用的时候一定要传一个文件格式进来！！！不管你用的是什么插件，都要确保是这种格式（File）
- 调用示例：
async addFile(file) {
const md5 = await this.calculateMD5(file[0].videoFile);
console.log(md5);
},
- 返回结果，是这样就代表没问题
1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)
