JS文件上传时如何使用MD5加密

目录
  • JS文件上传使用MD5加密
    • 什么是MD5?
    • MD5怎么用?
  • 前端中md5的用法
    • md5的使用方法

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实例上

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript大文件上传的处理方法之切片上传

    目录 前言 切片后上传 生成hash 文件秒传 暂停上传 中断请求示例 添加暂停上传功能 恢复上传 添加功能总结 前言 本篇介绍了切片上传的基本实现方式(前端),以及实现切片上传后的一些附加功能,切片上传原理较为简单,代码注释比较清晰就不多赘述了,后面的附加功能介绍了实现原理,并贴出了在原本代码上的改进方式.有什么错误希望大佬可以指出,感激不尽. 切片后上传 切片上传的原理较为简单,即获取文件后切片,切片后整理好每个切片的参数并发请求即可. 下面直接上代码: HTML <template> &

  • JavaScript文件上传的常见问题整理

    文件上传:<input type="file" /> (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件: <input type="file" multiple> 只允许上传一个文件: <input  type="file" single> 2.上传指定的文件格式 <input type="file" accept="i

  • JS实现可恢复的文件上传示例详解

    目录 正文 不太实用的进度事件 算法 server.js uploader.js index.html 正文 使用 fetch 方法来上传文件相当容易. 连接断开后如何恢复上传?这里没有对此的内建选项,但是我们有实现它的一些方式. 对于大文件(如果我们可能需要恢复),可恢复的上传应该带有上传进度提示.由于 fetch 不允许跟踪上传进度,我们将会使用 XMLHttpRequest. 不太实用的进度事件 要恢复上传,我们需要知道在连接断开前已经上传了多少. 我们有 xhr.upload.onpro

  • JavaScript进阶之前端文件上传和下载示例详解

    目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</

  • 原生JS实现文件上传

    本文实例为大家分享了JS实现文件上传的具体代码,供大家参考,具体内容如下 一.目的: 实现上传图片功能 二.效果: 三.思路: 用input标签自带的上传,先隐藏掉,给上传按钮添加点击事件,绑定input的点击事件 四.代码: //html <input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @cha

  • JavaScript实现大文件上传的示例代码

    下面就是JavaScript实现大文件上传功能的代码 bigFileUpload.js const path = require('path') import axios from 'axios' import { resolve } from 'path'; import { promised } from 'q'; // 递归调用请求 async function dg(requestMargreList, options, key = 0) { let index = key const

  • JS文件上传时如何使用MD5加密

    目录 JS文件上传使用MD5加密 什么是MD5? MD5怎么用? 前端中md5的用法 md5的使用方法 JS文件上传使用MD5加密 什么是MD5? MD5信息摘要算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于确保信息传输完整一致.(MD5 百度百科) 简而言之,就是对上传文件进行加密. MD5怎么用? 在页面中使用需下载依赖包,yarn spark-md5或npm in

  • BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • Angular Js文件上传之form-data

    前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传服务器,然后通过服务器传阿里云. 不废话了直接贴前端代码: $http({ method: 'POST', url: '/wechatapp/User/setAvatar', data: data, headers: { 'Content-Type': undefined }, transformR

  • Android 大文件上传时处理上传进度问题小结

    进行大文件上传时,显示上传进度是很好的用户体验,可以有效的缓解用户急躁的情绪.今天Android IT 分享一个好的显示上传进度的解决方案. 我们用到以下两个类就可实现带进度条的文件上传: 1.CustomMultiPartEntity extends MultipartEntity, 2.HttpMultipartPost extends AsyncTask import java.io.FilterOutputStream; import java.io.IOException; impor

  • Struts2实现文件上传时显示进度条功能

    最近在做一个资源共享的项目中,采用了Struts2.1.8+Spring2.5.6+hibernate3.32的框架整合方式进行开发.在文件上传这块,因为需要实现文件上传时显示进度条的功能,所以尝试了一下.怕以后忘记,先贴出来分享下. 要在上传文件时能显示进度条,首先需要实时的获知web服务端接收了多少字节,以及文件总大小,这里我们在页面上使用AJAX技术每一秒向服务器发送一次请求来获得需要的实时上传信息.但是当我们使用struts2后怎么在服务端获得实时的上传大小呢?这里需要用到commons

  • .net文件上传时实现通过文件头确认文件类型的方法

    本文实例讲述了.net文件上传时实现通过文件头确认文件类型的方法,其中 script 用来返回给页面的数据,读者还可以根据自身需要对相关部分自行修改.另外,文件头也可以自行添加定义. 主要代码如下: AppCode/FileUpload.cs using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Text.RegularExpressions; using

  • 最好用的Bootstrap fileinput.js文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" /> <script type="text/javascript

  • smartupload实现文件上传时获取表单数据(推荐)

    实现文件上传的form表单必须满足两个条件:method="post" enctype="multipart/form-data" 表单中enctype="multipart/form-data"的意思是设置表单的MIME编码.默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传:只有使用了multipart/form-data,才能完整的传递文件数据.enctype="multi

  • node.js文件上传处理示例

    直入主题,在Node.js web 开发基本框架的前提下,我们来做一个文件上传功能 上传的handler比较简单,网上都能找到 var url=require('url'); var exec=require('child_process').exec; var querystring=require('querystring'); /********************************文件上传 第3方模块测试*************************/ function f

  • JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过

随机推荐