JS文件上傳時(shí)如何使用MD5加密
JS文件上傳使用MD5加密
什么是MD5?
MD5信息摘要算法(英語(yǔ):MD5 Message-Digest Algorithm),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值(hash value),用于確保信息傳輸完整一致。(MD5 百度百科)
簡(jiǎn)而言之,就是對(duì)上傳文件進(jìn)行加密。
MD5怎么用?
在頁(yè)面中使用需下載依賴包,yarn spark-md5或npm install spark-md5,并通過(guò)import引用。
import SparkMD5 from 'spark-md5';
實(shí)例
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('模板文件格式錯(cuò)誤,請(qǐng)重新上傳'); return false; } if(file.size > 80*1024*1024) { message.error('模板文件格式錯(cuò)誤,請(qǐng)重新上傳'); 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算法對(duì)輸入任意長(zhǎng)度的消息進(jìn)行運(yùn)行,產(chǎn)生一個(gè)128位的消息摘要(32位的數(shù)字字母混合碼)。
md5的安裝命令:
npm install js-md5 -s
md5的使用方法
在Vue原型鏈上添加md5為公用方法,也可以將其定義在公用方法文件中,需要時(shí)調(diào)用
先將md5引入vue原型中的一個(gè)方法中
import md5 from 'js-md5' //引入 ? Vue.prototype.$md5 = md5;//添加
在我們使用的時(shí)候
//可以將md5的參數(shù)拼到連接中,涉及到賬號(hào)密碼的信息可以通過(guò)該方法進(jìn)行加密 //方法一,這個(gè)方法是將md5方法綁定在vue原型上的方法 let md5Params=this.$md5("xxxxxxxx"); //方法二,這個(gè)方法是將直接通過(guò)md5方法進(jìn)行加密 let md5Params=md5("XXXXXX");
在vue中不同組件中可能會(huì)用到md5,如果不想影響全局作用域的話,可以通過(guò)綁定到vue實(shí)例上
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript 實(shí)現(xiàn)繼承的幾種方式
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)繼承的幾種方式,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-02-02JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ul中l(wèi)i標(biāo)簽實(shí)現(xiàn)刪除效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04原生js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片
這篇文章主要為大家詳細(xì)介紹了原生js點(diǎn)擊輪播切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02window.open的頁(yè)面如何刷新(父頁(yè)面)上層頁(yè)面
在開(kāi)發(fā)過(guò)程中會(huì)經(jīng)常遇到window.open打開(kāi)的頁(yè)面,同時(shí)問(wèn)題出現(xiàn)了如何刷新上層頁(yè)面呢?本文將詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12js AppendChild與insertBefore用法詳細(xì)對(duì)比
本篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的對(duì)比。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11淺談gulp創(chuàng)建完整的項(xiàng)目流程
本篇文章主要介紹了淺談gulp創(chuàng)建完整的項(xiàng)目流程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12