欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS文件上傳時(shí)如何使用MD5加密

 更新時(shí)間:2022年10月10日 11:16:34   作者:莉茲Liz  
這篇文章主要介紹了JS文件上傳時(shí)如何使用MD5加密,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)文章

最新評(píng)論