JS文件上傳時如何使用MD5加密
JS文件上傳使用MD5加密
什么是MD5?
MD5信息摘要算法(英語:MD5 Message-Digest Algorithm),一種被廣泛使用的密碼散列函數(shù),可以產生出一個128位(16字節(jié))的散列值(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位的數(shù)字字母混合碼)。
md5的安裝命令:
npm install js-md5 -s
md5的使用方法
在Vue原型鏈上添加md5為公用方法,也可以將其定義在公用方法文件中,需要時調用
先將md5引入vue原型中的一個方法中
import md5 from 'js-md5' //引入 ? Vue.prototype.$md5 = md5;//添加
在我們使用的時候
//可以將md5的參數(shù)拼到連接中,涉及到賬號密碼的信息可以通過該方法進行加密 //方法一,這個方法是將md5方法綁定在vue原型上的方法 let md5Params=this.$md5("xxxxxxxx"); //方法二,這個方法是將直接通過md5方法進行加密 let md5Params=md5("XXXXXX");
在vue中不同組件中可能會用到md5,如果不想影響全局作用域的話,可以通過綁定到vue實例上
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JavaScript使用ul中l(wèi)i標簽實現(xiàn)刪除效果
這篇文章主要為大家詳細介紹了JavaScript使用ul中l(wèi)i標簽實現(xiàn)刪除效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04js AppendChild與insertBefore用法詳細對比
本篇文章主要是對js中AppendChild與insertBefore的用法進行了詳細的對比。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11