基于MD5分块哈希的前端图片重复检测方案
一、需求背景
在Web应用中处理用户图片上传时,我们需要解决两个核心问题:
-
避免重复文件占用存储空间
-
提升上传效率减少带宽消耗
传统方案直接上传后校验,存在以下缺陷:
-
重复文件仍然消耗上传时间
-
服务器重复校验增加计算压力
-
大文件上传体验较差
二、实现思路
2.1 技术选型
-
MD5哈希算法:通过文件内容生成唯一指纹
-
分块计算:优化大文件处理效率
-
前端预处理:减轻服务器压力
-
Element Plus Upload:实现可视化上传组件
2.2 流程图解
graph TDA[选择文件] --> B{类型/大小校验}B -->|失败| C[提示错误]B -->|通过| D[分块计算MD5]D --> E[查询服务器记录]E -->|存在| F[直接返回文件ID]E -->|不存在| G[上传文件]
三、核心代码实现
3.1 前端MD5计算(SparkMD5)
export function generateMD5OfFile(file: File): Promise<string> {return new Promise((resolve, reject) => {const chunkSize = 2 * 1024 * 1024; // 2MB分块const chunks = Math.ceil(file.size / chunkSize);let currentChunk = 0;const spark = new SparkMD5.ArrayBuffer();const fileReader = new FileReader();fileReader.onload = (e) => {spark.append(e.target.result);currentChunk++;currentChunk < chunks ? loadNext() : resolve(spark.end());};fileReader.onerror = () => reject('MD5计算失败');const loadNext = () => {const start = currentChunk * chunkSize;const end = Math.min(start + chunkSize, file.size);fileReader.readAsArrayBuffer(file.slice(start, end));};loadNext();});
}
实现亮点:
-
分块处理避免内存溢出
-
异步Promise封装
-
兼容不同浏览器的slice方法
3.2 上传组件集成
<el-upload:http-request="handleAvatarChange":before-upload="beforeAvatarUpload"><!-- 预览区域 -->
</el-upload>
处理逻辑:
const handleAvatarChange = async (data: any) => {try {const md5 = await generateMD5OfFile(data.file);const formData = new FormData();formData.append('file', data.file);formData.append('md5', md5);const result = await reqImage(formData);if (result.code === 200) {userForm.value.avatarUrl = result.data.filePath;userForm.value.imageId = result.data.id;ElMessage.success('上传成功');}} catch (error) {ElMessage.error('上传失败');}
};
3.3 服务端建议方案
(需根据实际框架实现)
# 伪代码示例
def handle_upload(file, md5):exist = Image.query.filter_by(md5=md5).first()if exist:return {'code': 200, 'data': exist}new_file = save_file(file)Image.create(md5=md5, path=new_file.path)return {'code': 200, 'data': new_file}
springboot项目
@PostMapping("/upload")
@Operation(summary = "文件上传")
public Result<Image> uploadFile(@RequestParam("file") MultipartFile file, String md5) {LambdaQueryWrapper<Image> wrapper = new LambdaQueryWrapper<>();wrapper.eq(Image::getFileMd5, md5);Image image = imageService.getOne(wrapper);if(Objects.isNull(image)){String uuid = UUID.fastUUID().toString();minioUtils.upload(file, uuid);image = Image.builder().fileName(uuid).fileSize(String.valueOf(file.getSize())).fileMd5(md5).filePath(minioUtils.getFileUrl(uuid)).contentType(file.getContentType()).build();imageService.save(image);}return Result.success(image);
}
四、方案优势与注意事项
4.1 优势对比
指标 | 传统方案 | 本方案 |
---|---|---|
上传耗时 | 100% | 30%-70% |
服务器存储 | 冗余 | 零冗余 |
带宽消耗 | 高 | 按需 |
用户体验 | 差 | 快速响应 |
4.2 注意事项
-
MD5冲突概率:虽理论存在但实际可忽略
-
文件头校验:建议结合文件魔数验证
-
分块大小优化:根据平均文件大小调整
-
加密性能:Web Worker处理大文件
五、总结与扩展
本方案通过以下创新点实现高效上传:
-
前端预处理机制
-
哈希分块计算优化
-
服务端快速查询
未来优化方向:
-
WebAssembly加速计算
-
多哈希混合校验
-
断点续传集成
相关文章:
基于MD5分块哈希的前端图片重复检测方案
一、需求背景 在Web应用中处理用户图片上传时,我们需要解决两个核心问题: 避免重复文件占用存储空间 提升上传效率减少带宽消耗 传统方案直接上传后校验,存在以下缺陷: 重复文件仍然消耗上传时间 服务器重复校验增加计算压力…...
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题 1、HarmonyOS 有关webview Header无法更新的问题? 业务A页面 打开 webivew B页面,第一次打开带了header请求,然后退出webview B页面…...

胜软科技冲刺北交所一年多转港股:由盈转亏,毛利率大幅下滑
《港湾商业观察》施子夫 近期,山东胜软科技股份有限公司(以下简称,胜软科技)递表港交所获受理,独家保荐机构为广发证券(香港)。 在赴港上市之前,胜软科技还曾谋求过A股上市&#x…...

【JavaSE-7】方法的使用
1、方法的概念和使用 1.1、什么是方法 方法(method)是程序中最小的执行单元,类似于 C语言中的函数,方法存在的意义: 是能够模块化的组织代码(当代码规模比较复杂的时候).做到代码被重复使用, 一份代码可以在多个位置…...

Modbus TCP转Profibus DP协议转换网关赋能玻璃生产企业设备协同运作
一、案例背景 在玻璃生产行业,自动化控制对提升生产效率与保障产品质量起着决定性作用。一家玻璃生产企业为实现生产过程的精细化管控,引入了先进的自动化控制系统。其中,上位机电脑配备了WINCC组态软件,作为Modbus TCP主站&#…...

Java 大视界 -- Java 大数据在智能政务公共服务资源优化配置中的应用(118)
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...

C++学习之路,从0到精通的征途:入门基础
目录 一.C的第一个程序 二.命名空间 1.namespace的价值 2.命名空间的定义 3.命名空间使用 三.C的输入与输出 1.<iostream> 2.流 3.std(standard) 四.缺省参数 1.缺省参数的定义 2.全缺省/半缺省 3.声明与定义 五.函数重载 1.参数个数不同 2.参数类型不…...

ADC采集模块与MCU内置ADC性能对比
2.5V基准电压源: 1. 精度更高,误差更小 ADR03B 具有 0.1% 或更小的初始精度,而 电阻分压方式的误差主要来自电阻的容差(通常 1% 或 0.5%)。长期稳定性更好,分压电阻容易受到温度、老化的影响,长…...

Gartner发布2025年网络安全六大预测
文章目录 前言趋势1:生成式AI推动数据安全计划趋势2:管理机器身份趋势3:战术型AI趋势4:优化网络安全技术趋势5:扩大安全行为与文化计划的价值趋势6:应对网络安全倦怠 前言 Gartner发布2025年网络安全六大预…...
C#批量压缩并上载CSV数据文件到Box企业云盘
C# .NET 8实现Windows下批量压缩csv文件为zip文件,然后异步上传到box企业云服务网盘路径,实现异常处理和写入运行状态日志,参数来自ini配置文件。 C# .NET 8代码示例,包含INI配置读取、CSV文件压缩、Box上传、异步处理和日志记录…...

C++常见概念
第一个 C 程序 #include<iostream>using namespace std;int main() {cout << "helloworld" << endl;return 0; }命名空间 #include<stdio.h>int rand 10;int main() {printf("%d", rand);return 0; }#include<stdio.h> #…...

结构型模式---享元模式
概念 享元模式是一种结构型设计模式,他摒弃了在每个对象中保存所有数据的方式,通过共享多个对象所共有的相同状态,让你能在有限的内存容量中载入更多对象。享元模式将原始类中的数据分为内在状态数据和外在状态数据。 内在状态:就…...

2025年渗透测试面试题总结- 深某服-漏洞研究员实习(题目+回答)
网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 深信服-漏洞研究员实习 1. 在XX实习时做了什么 2. 渗透测试的思路简单描述 3. 护网中承担什么角色 4…...

(13)Anaconda 安装配置详解
1. Anaconda 简介 Anaconda 是一个用于科学计算和数据分析的 Python 发行版,它集成了 Python 解释器、大量常用的科学计算库以及强大的包管理工具。 2. Anaconda 主要特点 丰富的库集合:包含了超过 1500 个用于科学计算、数据分析、机器学习等领域的常用 Python 库,例如 N…...

MWC 2025 | 移远通信大模型解决方案加速落地,引领服务机器人创新变革
随着人工智能、大模型等技术的蓬勃发展,生成式AI应用全面爆发。在此背景下,服务机器人作为大模型技术在端侧落地的关键场景,迎来了前所未有的发展机遇。 作为与用户直接交互的智能设备,服务机器人需要应对复杂场景下的感知、决策和…...

[内网安全] Windows 域认证 — Kerberos 协议认证
🌟想系统化学习内网渗透?看看这个:[内网安全] 内网渗透 - 学习手册-CSDN博客 0x01:Kerberos 协议简介 Kerberos 是一种网络认证协议,其设计目标是通过密钥系统为客户机 / 服务器应用程序提供强大的认证服务。该认证过…...

[Computer Vision]实验七:图像检索
目录 一、实验内容 二、实验过程 2.1 准备数据集 2.2 SIFT特征提取 2.3 学习“视觉词典”(vision vocabulary) 2.4 建立图像索引并保存到数据库中 2.5 用一幅图像查询 三、实验小结 一、实验内容 实现基于颜色直方图、bag of word等方法的以图搜…...
C++之thread_local变量
C之thread_local变量_c threadlocal-CSDN博客 thread_local简介 thread_local 是 C11 为线程安全引进的变量声明符。表示对象的生命周期属于线程存储期。 线程局部存储(Thread Local Storage,TLS)是一种存储期(storage duration),对象的存储是在…...

【国产Linux | 银河麒麟】麒麟化龙——KylinOS下载到安装一条龙服务,起飞!
🗺️博客地图 📍一、下载地址 📍二、 系统安装 本文基于Windows操作系统vmware虚拟机安装 一、下载地址 官网:产品试用申请国产操作系统、麒麟操作系统——麒麟软件官方网站 下载自己需要的版本,完成后,…...
(接“使用js去复制网页内容的方法”)js中的execCommand怎么复制富文本内容解析
document.execCommand(copy) 是传统的剪贴板操作方法,但它主要用于复制纯文本内容。如果你想复制富文本内容(包括 HTML 标签和样式),需要结合一些技巧来实现。以下是具体方法: 方法:通过创建隐藏的富文本元…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...

黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...

Mysql故障排插与环境优化
前置知识点 最上层是一些客户端和连接服务,包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念,为通过安全认证接入的客户端提供线程。同样在该层上可…...