前端md5校验文件

前端获取文件的md5值,与文件一同传到后端,后端同样对md5值进行校验。如果相同,则文件未被损坏(其实这种方式优点类似于tcp、ip的差错校验,好像token也是这种方式)

项目准备

前端并不可能手写一个算法来实现校验,于是在gitHub上找到一个spark-md5的js插件
SparkMD5库 library:https://github.com/satazor/SparkMD5

npm i spark-md5  -save

代码处理

在处理过程中,需要注意的是file.onload是一个异步事件,因此使用时需要使用promise封装一下,才能得到异步的返回值
,然后在后面处理ajax请求

export default function (file) {return newPromise(resolve, reject){//声明必要的变量let fileReader = new FileReader()//文件分割方法(注意兼容性)blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,//文件每块分割2M,计算分割详情chunkSize = 2097152,chunks = Math.ceil(file.size / chunkSize),currentChunk = 0,//每块文件读取完毕之后的处理fileReader.onload = function (e) {console.log("读取文件", currentChunk + 1, "/", chunks);//每块交由sparkMD5进行计算spark.appendBinary(e.target.result);currentChunk++;//如果文件处理完成计算MD5,如果还有分片继续处理if (currentChunk < chunks) {loadNext();} else {console.log("finished loading");console.info("计算的Hash", spark.end());}//处理单片文件的上传function loadNext() {var start = currentChunk * chunkSize,end = start + chunkSize >= file.size ? file.size : start + chunkSize;fileReader.readAsBinaryString(blobSlice.call(file, start, end));}loadNext();}}
}

如果是前端生成文件流,则

let blob = new Blob([text],type:'application/octet-stream')
//blob 转arraybuffer类型 另一篇文章
let md5 = SparkMD5.ArrayBuffer.hash(arraybuffer).toString().toUpperCase();

spark-md5 的详解博客推荐
https://blog.csdn.net/qq_36017964/article/details/131247303

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

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

相关文章

python新特性

字符串格式化输出 字符串格式化输出 formatted字符串是带有f字符前缀的字符串&#xff0c;可以很方便的格式化字符串 #旧版本 name 泉信 print(公司是&#xff1a; %s%name) print(公司是&#xff1a; {}.format(name)) #新版本 print(f欢迎加入&#xff1a; {name}) lang…

c++学生排名表(析构函数)

现在输入一批学生&#xff08;人数大于0且不超过100&#xff09;的名次和他们的姓名。要求按名次输出每个人的排名。 输入格式&#xff1a;每行为一个学生的信息&#xff0c;共两项&#xff0c;第一项为排名&#xff08;为正整数&#xff0c;且任意两名学生的排名均不同&#…

2024年武汉中级工程师评审学历、论文、业绩有什么要求?

2024年大部分地区职称申报已经开始&#xff0c;今年因为政策变动&#xff0c;基本上需要全员参加水平能力测试&#xff0c;水测通过之后安排评审&#xff0c;那么对于中级职称评审有什么要求呢&#xff1f;我们一起跟甘建二看看。 一、2024年武汉中级工程师职称评审学历要求&am…

Web前端—属性描述符

属性描述符 假设有一个对象obj var obj {a:1 }观察这个对象&#xff0c;我们如何来描述属性a&#xff1a; 值为1可以重写可以遍历 我们可以通过Object.getOwnPropertyDescriptor得到它的属性描述符 var desc Object.getOwnPropertyDescriptor(obj, a); console.log(desc);我…

安卓逆向 | 某X游戏垂类Web nonce

*本案例仅做分析参考,如有侵权请联系删除 1.逻辑分析 通过XHR断点,然后逐步往上调发现nonce生出处。 在console执行下函数 其中 i,是当前日期和时间的秒级时间戳,并将其向下取整到最接近的整数。 i = ~~(+_.w() / 1e3)w</

设计模式之迭代器模式(上)

迭代器模式 1&#xff09;概述 1.概念 存储多个成员对象&#xff08;元素&#xff09;的类叫聚合类(Aggregate Classes)&#xff0c;对应的对象称为聚合对象。 聚合对象有两个职责&#xff0c;一是存储数据&#xff0c;二是遍历数据。 2.概述 迭代器模式(Iterator Patter…

Go语言不能常量取址!?

题如下图 在软件开发中&#xff0c;常量是一种重要的编程元素&#xff0c;它们在程序中起到固定值的作用被大量使用 Go语言中的常量取址 在 Go 语言中&#xff0c;常量是无法被取址的。这意味着我们不能使用取址操作符 & 来获取常量的地址。例如&#xff1a; const a …

【Java EE】关于Spring MVC 响应

文章目录 &#x1f38d;返回静态页面&#x1f332;RestController 与 Controller 的关联和区别&#x1f334;返回数据 ResponseBody&#x1f38b;返回HTML代码片段&#x1f343;返回JSON&#x1f340;设置状态码&#x1f384;设置Header&#x1f338;设置Content-Type&#x1f…

MySQL高级(索引分类-聚集索引-二级索引)

目录 1、主键索引、唯一索引、常规索引、全文索引 2、 聚集索引、二级索引 3、回表查询 4、通过id查询和通过name查询那个执行效率高&#xff1f; 5、 InnoDB主键索引的 B tree 高度为多高呢&#xff1f; 1、主键索引、唯一索引、常规索引、全文索引 在MySQL数据库&#xff0c…

[【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSON2WEB前端框架搭建 【J…

微信小程序picker设置了系统年度,打开选择年份从1年开始显示

背景&#xff1a;开发微信小程序时&#xff0c;使用了picker组件&#xff0c;设置值为当前系统时间年份&#xff0c;可以正常回显年份。但是打开面板选择年份的时候&#xff0c;默认从一年开始显示的。如下图所示。 原因&#xff1a;因为绑定的年份字段为Number类型。 解决方案…

文心一言 vs. GPT-4: 全面比较

1. 训练数据和预训练 文心一言 训练数据&#xff1a;文心一言是由中国研究人员开发的中文语言模型。它主要在大量古典中文文学作品上进行训练&#xff0c;包括诗歌、散文和历史文本。这些文学作品涵盖了丰富的中文语言和文化&#xff0c;使得文心一言在传统文化方面具有独特优…

React中State管理的4 个关键解决方案

在 React 应用开发中,状态(state)管理是非常重要的一部分。合理地管理状态可以确保组件的行为正确,提高应用的可维护性和性能。然而,在实际使用 React 的 state 时,开发者常常会遇到一些常见的问题和陷阱。 本文将从解决问题的角度,总结 React 中 state 管理的4个关键技巧: 使…

面向对象知识汇总(5)

目录 Day 5问题二十二&#xff1a;抽象类1. 抽象类概念2. 抽象类语法3. 抽象类特性4. 抽象类和普通类的区别 问题二十三&#xff1a;接口1. 接口的概念2. 接口的语法规则3. 接口的使用4. 接口的特性5. 实现多个接口6. 接口间的继承 Day 5 问题二十二&#xff1a;抽象类 1. 抽…

考研总计划篇

政治 九月份开始听徐涛老师的课&#xff0c;只需要听哲学&#xff0c;政治&#xff0c;经济学即可&#xff0c;然后用仓盾小程序刷题&#xff0c;刷题就吃饭的时候刷就是了。 工具书—苏一的提分手册&#xff0c;每天抽一个小时刷刷上面的知识点。 英语&#xff08;现在到九…

12(13)(14)-2(1)-CSS 字体图标+实战:商城首页

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 CSS 字体图标1 字体图标的产生2 字体图标的优点3 字体图标的下载4 字体图标的…

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879)

0x01 产品简介 WordPress插件LayerSlider是一款可视化网页内容编辑器、图形设计软件和数字视觉效果应用程序,全球活跃安装量超过 1,000,000 次。 0x02 漏洞概述 WordPress LayerSlider插件版本7.9.11 – 7.10.0中,由于对用户提供的参数转义不充分以及缺少wpdb::prepare(),…

【第二十三篇】Burpsuite+SQL注入实现登录绕过等(靶场实战案例)

目录 Where+SQL注入获取隐藏数据SQL注入实现登录绕过Union+SQL注入获取数据库类型和版本Where+SQL注入获取隐藏数据 存在一个业务场景如下 筛选商品时,后端查询语句如下: SELECT * FROM products WHERE category = Gifts AND released = 1只有商品名匹配且该商品已发布(r…

ubuntu系统开机无限循环输入密码后黑屏【以及问题2:ls后桌面有文件但是桌面看不到】的解决方法

问题1&#xff1a;刚进来黑屏&#xff0c;无限循环输入密码后黑屏亮屏&#xff0c;然后又输入密码黑屏亮屏…… 解决方法&#xff1a;卸载重装桌面系统ubuntu-desktop那个。然后用的是在命令行startx可以进入一个新的与图形化界面&#xff0c; 然后进来界面后&#xff0c; 又遇…