ts js vue 验证文件 MD5 值 spark-md5

ts js vue 验证文件 MD5 值 spark-md5

如何在前端中验证要上传的文件的 md5 值

在这里插入图片描述

一、安装 spark-md5 插件

需要用到 spark-md5 这个插件

官方 github:https://github.com/satazor/js-spark-md5/tree/master

yarn add spark-md5
//  或
npm i spark-md5

使用的时候引入:

import SparkMD5 from "spark-md5";

二、封装成一个方法

要验证文件的 md5 ,官方的文档里就有这个例子,直接照抄它,我封装了下,封成了一个返回 Promise 的方法。如下:

这是一个 TS 版本的,改成 js 只需要将入口处的文件类型定义去除就可以了
function generateMD5OfFile(file) {

import SparkMD5 from "spark-md5";/*** 生成一个文件的 MD5 值* @param file File*/
function generateMD5OfFile(file: File) : Promise<string>{return new Promise((resolve, reject) => {let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,chunkSize = 2097152,                             // Read in chunks of 2MBchunks = Math.ceil(file.size / chunkSize),currentChunk = 0,spark = new SparkMD5.ArrayBuffer(),fileReader = new FileReader();fileReader.onload = function (e) {console.log('read chunk nr', currentChunk + 1, 'of', chunks);spark.append(e.target.result);                   // Append array buffercurrentChunk++;if (currentChunk < chunks) {loadNext();} else {resolve(spark.end())console.log('finished loading');console.info('computed hash', spark.end());  // Compute hash}};fileReader.onerror = function () {console.warn('oops, something went wrong.');reject('MD5 calc error')};function loadNext() {let start = currentChunk * chunkSize,end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));}loadNext();})
}

三、使用它

如何使用,你可以将这个方法,下面是大体的内容,不全,但能表达具体操作过程了。

<el-form-item label="升级文件"><el-uploadref="refFormBoxUpdate"class="upload-demo"action="null":limit="10":auto-upload="false":on-change="handleChange":on-remove="handleRemove":multiple="false"><el-button size="default" type="primary" icon="Files">选择云盒升级文件</el-button></el-upload>
</el-form-item>
<el-form-item label="MD5" prop="md5"><el-input v-model.trim="formBoxUpgrade.md5" placeholder="请输入文件验证 MD5"/>
</el-form-item><script setup lang="ts">
import {generateMD5OfFile} from "@/utility.ts";const refUpload = ref()
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {console.log(file, uploadFiles)
}
const handleChange: UploadProps['onChange'] = (file, uploadFiles) => {console.log(file, uploadFiles)formBoxUpgrade.value.file = file.rawif (file.raw){// 当文件变化时,直接用它生成 md5generateMD5OfFile(file.raw).then(res =>{formBoxUpgrade.value.md5 = res})}
}
</script>

四、结果

在这里插入图片描述

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

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

相关文章

基于python+vue文学名著分享系统的设计与实现flask-django-nodejs-php

随着世界经济信息化、全球化的到来和互联网的飞速发展&#xff0c;推动了各行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、动态的、交互友好的、高效的文学名著分享系统。当前的信息管理存在工作效率…

编程题:二叉树层次遍历(Java)

有一棵二叉树&#xff0c;每个节点由一个大写字母标识(最多26个节点&#xff09;。 现有两组字母&#xff0c;分别表示后序遍历&#xff08;左孩子->右孩子->父节点&#xff09;和中序遍历&#xff08;左孩子->父节点->右孩子&#xff09;的结果&#xff0c;请你输…

有没有适合pr剪辑视频使用的蓝色魔法火焰能量特效素材模板

12个蓝色魔法火焰能量特效VFX元素pr素材模板。 可定制的能量电荷、灰尘等离子体和发光的电火花是游戏电影、电影特效或有影响力的视频内容的理想选择&#xff0c;增添了史诗般的电影质量。无论是神秘的爆炸、闪闪发光的闪电还是旋转的漩涡&#xff0c;每一部动画都是力量的灯塔…

Git版本控制

这是两个学习Git推荐必看的文档&#xff0c;第一个链接是Git的官方权威文档&#xff0c;第二个链接是国内程序员在开发中&#xff0c;总结的Git快速入门教程&#xff0c;掌握这个&#xff0c;也足够应付在工作中的场景。 Git权威书籍《ProGit》中文版https://gitee.com/progit…

让天下没有难学的大模型!我整理一份大模型技术知识图谱!

最近陆续有一些同学反馈&#xff0c;感觉大模型知识点太多了&#xff0c;找不到头绪。 今天我整理一份大模型技术以及应用的知识图谱&#xff0c;让大家轻松学习大模型&#xff0c;喜欢点赞、收藏、关注。 另外&#xff0c;技术交流可以文末加入我们。 大模型的预训练技术 …

Android Studio 编译报错 ( Could not find com.android.tools.build:gradle:4.2.1.)

检查下根目录下的 build.gradle 配置 , 是否只配置了 jcenter 仓库 &#xff0c;加上 google()mavenCentral() 重新编译试一下

ArrayList的常用方法

ArrayList是Java中常用的动态数组类&#xff0c;它提供了一系列用于操作和管理数组的方法。下面是一些ArrayList常用方法的介绍&#xff1a; add()方法&#xff1a;向ArrayList中添加元素&#xff0c;可以指定位置添加元素或者在末尾添加元素。 ArrayList<String> list …

全网最靠谱的短网址平台,你知道几个?

在当今互联网时代&#xff0c;短网址平台成为了人们分享链接的常用工具。它们不仅可以将冗长的网址压缩为简洁的短链接&#xff0c;还能提供更多的功能和优势。在众多的短网址平台中&#xff0c;有几个平台以其可靠性和出色的性能脱颖而出。今天&#xff0c;我们就来介绍几个全…

跟我学C++中级篇——STL的中的删除

一、介绍 在STL中一般删除的方式有两类&#xff0c;一种是使用全局的std::remove(remove_if类似)&#xff0c;一种是使用容器自带的erase&#xff0c;前者其实并没有真正的删除数据&#xff0c;而后者则是在移动时&#xff0c;会有一些细节的处理&#xff0c;否则要么程序崩溃…

《数字人》三个灵魂拷问 是什么?为什么?怎么用?

数字人的出现和发展是由于人工智能和计算机图形学等技术的进步&#xff0c;使得我们可以更好地模拟和创造人类的外貌、行为和交流能力。 1.数字人是什么&#xff1f; 数字人通常是指利用计算机技术和人工智能技术创建的虚拟人物或角色。这些数字化的人物可以具有各种外貌、行为…

SOCKS5代理、代理IP、HTTP与网络安全的深层探寻

在这个数字化时代&#xff0c;网络技术的迅猛发展与网络安全的挑战相伴而生。作为一名软件工程师&#xff0c;深入探索SOCKS5代理、代理IP、HTTP协议及其在网络安全领域的应用&#xff0c;不仅是技术提升的必经之路&#xff0c;更是守护网络世界安全的关键。本文将带您深入理解…

计算机网络基础知识

一、网络概述 1.网络定义与功能 利用通信线路物理地将不同的终端连接起来&#xff0c;按照网络协议相互通信&#xff0c;以共享软件、硬件和数据资源为目标的系统 数据通信&#xff1a;在计算机之间传送各种信息 资源共享&#xff1a;硬件资源共享、软件资源共享 负荷均衡&am…

C++ 小玉在游泳

文章目录 一、题目描述小玉在游泳题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 二、参考代码 一、题目描述 小玉在游泳 题目描述 小玉开心的在游泳&#xff0c;可是她很快难过的发现&#xff0c;自己的力气不够&#xff0c;游泳好累哦。已知小玉第一步能游 …

鸿蒙开发钱途不可限量!万人大厂岗位激增月入2万机会来了

抢人&#xff01;抢人&#xff01;抢人&#xff01; 抢滩鸿蒙&#xff0c;人才先行。2024年鸿蒙人才抢夺大战一触即发&#xff0c;刻不容缓。 随着时代的发展&#xff0c;就业竞争愈加激烈&#xff0c;内卷化越来越严重。如今互联网行业以及计算机软件开发领域成为了很多大学…

transformer的学习:Attention is all you need

目录 整体概述&#xff1a;​编辑​编辑 encoder&#xff1a; embedding&#xff1a; ​编辑 self-attention&#xff1a; 向量的相似度计算&#xff1a; qkv怎么来的​编辑 softmax&#xff1a; code multi-head-attention 位置编码&#xff1a; 残差&&FFN&…

使用ansible剧本进行lvm分盘

使用 Ansible 剧本&#xff08;Playbook&#xff09;进行 LVM 分区管理是一种自动化的方式&#xff0c;可以帮助管理员在多台主机上批量管理逻辑卷。 部署环境 3台主机&#xff0c;添加硬盘 ansible-galaxy collection install community.general 联网执行&#xff0c;下…

leetcode1793--好子数组的最大分数

1. 题意 给定一个数组&#xff0c;求包含 a [ k ] a[k] a[k]的 m i n ( a r r ) a r r . s i z e ( ) , s . t . a [ k ] ∈ a r r min(arr)\times arr.size(),s.t.a[k] \in arr min(arr)arr.size(),s.t.a[k]∈arr 好子数组的最大分数 与柱形图面积相似&#xff0c;只是区间…

Linux课程____Samba文件共享服务

一、 Samba服务基础 SMB协议&#xff0c;服务消息块 CIFS协议&#xff0c;通用互联网文件系统 1.Samba 服务器的主要程序 smbd:提供对服务器中文件、打印资源的共享访问 nmbd:提供基于 NetBlOS 主机名称的解析 2.目录文件 /etc/samba/smb.conf 检查工具&#xff1a;test…

【力扣】387. 字符串中的第一个唯一字符

题目描述 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入: s “leetcode” 输出: 0 示例 2: 输入: s “loveleetcode” 输出: 2 示例 3: 输入: s “aabb” 输出: -1…

备战蓝桥杯Day30 - 贪心-活动选择问题

问题描述 假设有n个活动&#xff0c;这些活动要占用同一片场地&#xff0c;而场地在某时刻只能供一个活动使用。 每个活动都有一个开始时间 si 和结束时间 fi (题目中时间以整数表示) ,表示活动在[si, f)区间占用场地。 问:安排哪些活动能够使该场地举办的活动的个数最多? 解…