vue上传文件MD5加密

1.下载MD5依赖
npm install crypto-js
2.在utils文件夹中新增文件md5方法文件,文件名自定义(fileMd5Sum.js)

import CryptoJs from 'crypto-js' 
export default {// md5值计算fileMd5Sum(file) {let CryptoJS = require("crypto-js");return new Promise(resolve => {const fileReader = new FileReader();fileReader.onloadend = ev => {resolve(CryptoJS.MD5(CryptoJS.enc.Latin1.parse(ev.target.result)).toString(CryptoJS.enc.Hex));};fileReader.readAsBinaryString(file);});}
}

3.定义全局变量在main.js中引入

//文件md5计算方法
import fileMd5Sum from '@/utils/fileMd5Sum.js';
Vue.prototype.fileMd5Sum = fileMd5Sum;

4.使用

// files是上传的文件
this.fileMd5Sum.fileMd5Sum(files).then((res)-=>{console.log(res) // res就是加密后生成的md5
})

5.这是一个切片上传的例子

// dom
<el-upload :show-file-list="false" accept=".doc,.docx" ref="uploads" :limit="1" action:http-request="putinMirror3" :auto-upload="true"><el-button size="small" type="primary">数据上传</el-button><el-input v-model="addform.dataTestnMame" autocomplete="off" style="width:350px;margin-left: 20px;" disabledv-if="first4"></el-input><el-progress :text-inside="true" :stroke-width="26" :percentage="percentage4" v-if="!first4"style="position:absolute;left:150px;width:300px;top:0px"></el-progress></el-upload>// 切片上传putinMirror3(file) {let param = {fileName: file.file.name}firstFileUp(param).then(response => {var uploadId = response.data.uploadId// 每个文件切片大小定为5MBvar sliceSize = 50 * 1024 * 1024;//文件大小限制为最大10个G,可根据需求修改var filesizes = 100 * 1024 * 1024 * 1024;let that = this;const blob = file.file;const fileSize = blob.size;// 文件大小// this.fileNmae.push(blob.name)const fileName = blob.name;// 文件名//计算文件切片总数var totalSlice = 0;if (fileSize >= sliceSize) {totalSlice = Math.ceil(fileSize / sliceSize)} else {totalSlice = 1}var num = 0var list = []var guid = Date.parse(new Date())if (fileSize <= filesizes) {// 循环上传for (let i = 0; i < totalSlice; i++) {let start = i * sliceSize;let chunk = blob.slice(start, Math.min(fileSize, start + sliceSize));let files = new File([chunk], fileName)let partSize = files.sizethis.fileMd5Sum.fileMd5Sum(files).then(res => {var formData = new FormData();formData.append("uploadId", uploadId);formData.append("file", files);formData.append("partSize", partSize);formData.append("partNumber", i + 1);formData.append("md5Digest", res);let instance = axios.create({baseURL: 'baseUrl',data: formData,headers: { 'Content-Type': 'multipart/form-data', 'Authorization': "Bearer " + getAccessToken() }})this.first4 = falseinstance.post(`${this.uploadFileUrl}`, formData).then((res) => {if (res.data.code == 0) {list.push(res.data.data)this.percentage4 = Number(((list.length / totalSlice) * 100).toFixed(2))if (list.length == totalSlice) {let param = {uploadId: uploadId,partTags: list}secendFileUp(param).then(response => {this.fileList4.push(response.data)this.percentage4 = 100});}} else {that.$message({message: res.msg,type: 'error'});}})});}} else {that.$message({message: '文件大小超出10G',type: 'error'});}});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

支付宝开放平台第三方代小程序开发,消息服务推送通知总结

大家好&#xff0c;我是小悟 关于支付宝开放平台第三方代小程序开发的消息服务推送通知&#xff0c;是开放平台代小程序实现业务的重要功能。 消息服务推送通知&#xff0c;支持商家两种通讯协议来接收消息&#xff0c;分别为websocket 长连接和http。 关于websocket方式&am…

Zookeeper断网重连事件回调源码分析

“不积跬步&#xff0c;无以至千里。” 背景 确定使用Curator作为zk客户端的情况下&#xff0c;断网[发生SUSPENDED | LOST事件]重连后每次都会回调org.apache.curator.framework.state.ConnectionStateListener#stateChanged方法&#xff0c;且事件类型为org.apache.curator.…

苍穹外卖(八) 使用WebSocket协议完成来单提醒及客户催单功能

WebSocket介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信(双向传输)——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP…

ChatGPT角色扮演教程,Prompt词分享

使用指南 1、可直复制使用 2、可以前往已经添加好Prompt预设的AI系统测试使用 https://ai.idcyli.comhttps://ai.idcyli.com 雅思写作考官 我希望你假定自己是雅思写作考官&#xff0c;根据雅思评判标准&#xff0c;按我给你的雅思考题和对应答案给我评分&#xff0c;并且按…

LeetCode每日一题:1488. 避免洪水泛滥(2023.10.13 C++)

目录 1488. 避免洪水泛滥 实现代码与解析&#xff1a; 贪心 原理思路&#xff1a; 1488. 避免洪水泛滥 题目描述&#xff1a; 你的国家有无数个湖泊&#xff0c;所有湖泊一开始都是空的。当第 n 个湖泊下雨前是空的&#xff0c;那么它就会装满水。如果第 n 个湖泊下雨前是…

使用 Secrets OPerationS 管理 Kubernetes 密钥

Kubernetes非常受欢迎&#xff0c;很大程度上要归功于它的灵活性。由于其模块化&#xff0c;它还可以快速部署。然而&#xff0c;为了保持这种模块化&#xff0c;您需要以流畅且可定制的方式构建云环境&#xff1b;这意味着确保 ConfigMap 和 Secret 的设计与基础设施无关。 您…

DirectX绘制流水线

使用DirectX可以让在Windows平台上运行的游戏或多媒体程序获得更高的执行效率&#xff0c;掌握DirectX的基本概念和技术是虚拟现实技术、计算机仿真和3D游戏程序开发的基础。 DirectX概述 DirectX是微软的一个多媒体应用编程接口(API)工具包&#xff0c;用于为Windows操作系统…

数组——螺旋矩阵II

文章目录 一、题目二、题解 题目顺序&#xff1a;代码随想录算法公开课&#xff0c;b站上有相应视频讲解 一、题目 59. Spiral Matrix II Given a positive integer n, generate an n x n matrix filled with elements from 1 to n2 in spiral order. Example 1: Input: n …

十五届蓝桥杯软件和信息技术大赛

目录 &#x1f388;大赛奖项 &#xff08;一&#xff09;高校类 1. 软件赛 2. 电子赛 3. 视觉艺术设计赛 4. 数字科技创新赛 &#x1f388;奖项设置 &#x1f388;时间安排&#xff08;预计&#xff09; &#x1f388;规则简介 &#x1f388;如何准备&#xff1f; &a…

EfficientDet: Scalable and Efficient Object Detection

CVPR2020 V7 Mon, 27 Jul 2020 引用量&#xff1a;243 机构&#xff1a;Google 贡献&#xff1a;1>提出了多尺度融合网络BiFPN 2>对backbone、feature network、box/class prediction network and resolution进行复合放缩&#xff0c;有着不同的…

在 VSCode 中使用 PlantUML

最近&#xff0c;因为工作需要绘制一些逻辑图&#xff0c;我自己现在使用的是 PlantUML 或者 mermaid&#xff0c;相比之下前者更加强大。不过它的环境也麻烦一些&#xff0c;mermaid 在一些软件上已经内置了。但是 PlantUML 一般需要自己本地安装或者使用远程服务器&#xff0…

Unity中Shader不同灯光类型的支持与区分

文章目录 前言一、在开始之前做一些准备1、在上一篇文章的场景基础上&#xff0c;增加一个Unity默认的球体作为对照组2、创建一个点光源&#xff0c;用来看点光源的影响 对 Unity默认的Shader效果 和 我们实现的Shader效果 之间的不同 二、点光源的适配把上一篇文章中 ForwardB…

R语言的计量经济学实践技术应用

计量经济学通常使用较小样本&#xff0c;但这种区别日渐模糊&#xff0c;机器学习在经济学领域、特别是经济学与其它学科的交叉领域表现日益突出&#xff0c;R语言是用于统计建模的主流计算机语言&#xff0c;在本次培训中&#xff0c;我们将从实际应用出发&#xff0c;重点从数…

【arm实验2】按键中断事件控制实验

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再次按下&#xff0c;灭 按键2按下&#xff0c;蜂鸣器叫&#xff0c;再次按下&#xff0c;停 按键3按下&#xff0c;风扇转&#xff0c;再次按下&#xff0c;停 主函数&#xff1a; linuxlinux:~/study/08-c$…

指定显卡运行python脚本

指定显卡运行python脚本 指定显卡运行python脚本 指定显卡运行python脚本 CUDA_VISIBLE_DEVICES0 python infer.py

electron打包后主进程下载文件崩溃

electronvue3写了一个小项目&#xff0c;实现了一个文件下载功能 存在的问题 打包后&#xff0c;应用下载文件崩溃代码 // 渲染进程window.electron.ipcRenderer.invoke(save-file, {path: r.filePath,fileurl: previewUrl,}).then(response > {console.log(response ----…

八皇后问题的解析与实现

问题描述 八皇后问题是一个古老而又著名的问题。 时间退回到1848年,国际西洋棋棋手马克斯贝瑟尔提出了这样的一个问题: 在88格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行、同一列或同一斜线上,问一共有多少种摆法。 如何找到这所有的…

【基础篇】四、本地部署Flink

文章目录 1、本地独立部署会话模式的Flink2、本地独立部署会话模式的Flink集群3、向Flink集群提交作业4、Standalone方式部署单作业模式5、Standalone方式部署应用模式的Flink Flink的常见三种部署方式&#xff1a; 独立部署&#xff08;Standalone部署&#xff09;基于K8S部署…

使用Tortoisegit界面拉起master主分支以副分支以及命令行操作

文章目录 1、Gui操作界面2、命令行操作3、合并分支到master分支上面 1、Gui操作界面 "小乌龟"通常指的是Git的图形用户界面&#xff08;GUI&#xff09;工具&#xff0c;其中比较常见的是TortoiseGit。下面是使用TortoiseGit来拉取&#xff08;checkout&#xff09;一…

数据结构(一)—— 数据结构简介

文章目录 一、基本概念和术语&#xff1f;1.1、数据1.2、数据元素1.3、数据项&#xff08;属性、字段&#xff09;1.4、数据对象1.5、数据结构 二、逻辑结构和物理结构&#xff08;存储结构&#xff09;2.1、逻辑结构1、定义2、分类&#xff08;线性结构和非线性结构&#xff0…