JS文件上传使用MD5加密
什么是MD5？
MD5信息摘要算法（英语：MD5 Message-Digest Algorithm） ，一种被广泛使用的密码散列函数 ，可以产生出一个128位（16字节）的散列值（hash value） ，用于确保信息传输完整一致 。（MD5 百度百科）
简而言之 ，就是对上传文件进行加密 。
MD5怎么用？
在页面中使用需下载依赖包 ，yarn spark-md5或npm install spark-md5 ，并通过import引用 。
import SparkMD5 from spark-md5;
实例
import React, { Component } from react;
import SparkMD5 from spark-md5;
import { message, Button } from antd;
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
file: ,
fileName: ,
};
}
uploadFile = (e) => {
const file = e.target.files[0];
if (!file) {
return;
}
let fileType = file.name.substring(file.name.lastIndexOf(.) + 1).toLowerCase();
if (fileType !== xls && fileType !== xlsx && fileType !== xlsm) {
message.error(模板文件格式错误 ，请重新上传);
return false;
}
if(file.size > 80*1024*1024) {
message.error(模板文件格式错误 ，请重新上传);
return false;
}
this.setState({
file: file,
fileName: file.name,
});
this.md5Count(file);
};
//生成MD5
md5Count (file) {
let fileReader = new FileReader(),
blobSlice =
File.prototype.mozSlice ||
File.prototype.webkitSlice ||
File.prototype.slice,
chunkSize = 2097152,
// read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5(),
that = this;
fileReader.onload = function (e) {
spark.appendBinary(e.target.result);
// append binary string
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
let md = spark.end();
that.setState({
fileMd5: md,
rcFile: file
});
}
};
function loadNext () {
let start = currentChunk * chunkSize,
end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsBinaryString(blobSlice.call(file, start, end));
}
loadNext();
}
handleOk = () => {
const { fileName, fileMd5, rcFile } = this.state;
// this.setState({loading: true});
let formData = new FormData();
formData.append(fileName, fileName);
formData.append(fileMd5, fileMd5);
formData.append(rcFile, rcFile);
let result = await httpClient.get(apis.uploadFile, {formData});
...略
}
render() {
return(
<div>
<div className=c-upload>
<span className=red-star>*</span>
<a className=upload-file>上传模板</a>
<input
type=file
className=upload-input
accept=.xls,.xlsx,.xlsm
onChange={this.uploadFile}
/>
</div>
<Button type=primary onClick={this.handleOk}>上传</Button>
</div>
)
}
}
export default Demo;
前端中md5的用法
MD5的原理：MD5消息摘要算法 ，属Hash算法一类 。MD5算法对输入任意长度的消息进行运行 ，产生一个128位的消息摘要(32位的数字字母混合码) 。
md5的安装命令：
npm install js-md5 -s
md5的使用方法
在Vue原型链上添加md5为公用方法 ，也可以将其定义在公用方法文件中 ，需要时调用
先将md5引入vue原型中的一个方法中
import md5 from js-md5 //引入
Vue.prototype.$md5 = md5;//添加
在我们使用的时候
//可以将md5的参数拼到连接中,涉及到账号密码的信息可以通过该方法进行加密
//方法一 ，这个方法是将md5方法绑定在vue原型上的方法
let md5Params=this.$md5("xxxxxxxx");
//方法二 ，这个方法是将直接通过md5方法进行加密
let md5Params=md5("XXXXXX");
在vue中不同组件中可能会用到md5 ，如果不想影响全局作用域的话 ，可以通过绑定到vue实例上
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
