当前位置: 首页 > news >正文

基于MD5分块哈希的前端图片重复检测方案

一、需求背景

在Web应用中处理用户图片上传时,我们需要解决两个核心问题:

  1. 避免重复文件占用存储空间

  2. 提升上传效率减少带宽消耗

传统方案直接上传后校验,存在以下缺陷:

  • 重复文件仍然消耗上传时间

  • 服务器重复校验增加计算压力

  • 大文件上传体验较差


二、实现思路

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 注意事项

  1. MD5冲突概率:虽理论存在但实际可忽略

  2. 文件头校验:建议结合文件魔数验证

  3. 分块大小优化:根据平均文件大小调整

  4. 加密性能:Web Worker处理大文件


五、总结与扩展

本方案通过以下创新点实现高效上传:

  1. 前端预处理机制

  2. 哈希分块计算优化

  3. 服务端快速查询

未来优化方向:

  • WebAssembly加速计算

  • 多哈希混合校验

  • 断点续传集成

相关文章:

基于MD5分块哈希的前端图片重复检测方案

一、需求背景 在Web应用中处理用户图片上传时&#xff0c;我们需要解决两个核心问题&#xff1a; 避免重复文件占用存储空间 提升上传效率减少带宽消耗 传统方案直接上传后校验&#xff0c;存在以下缺陷&#xff1a; 重复文件仍然消耗上传时间 服务器重复校验增加计算压力…...

【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题

【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题 1、HarmonyOS 有关webview Header无法更新的问题&#xff1f; 业务A页面 打开 webivew B页面&#xff0c;第一次打开带了header请求&#xff0c;然后退出webview B页面…...

胜软科技冲刺北交所一年多转港股:由盈转亏,毛利率大幅下滑

《港湾商业观察》施子夫 近期&#xff0c;山东胜软科技股份有限公司&#xff08;以下简称&#xff0c;胜软科技&#xff09;递表港交所获受理&#xff0c;独家保荐机构为广发证券&#xff08;香港&#xff09;。 在赴港上市之前&#xff0c;胜软科技还曾谋求过A股上市&#x…...

【JavaSE-7】方法的使用

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

Modbus TCP转Profibus DP协议转换网关赋能玻璃生产企业设备协同运作

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

Java 大视界 -- Java 大数据在智能政务公共服务资源优化配置中的应用(118)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

C++学习之路,从0到精通的征途:入门基础

目录 一.C的第一个程序 二.命名空间 1.namespace的价值 2.命名空间的定义 3.命名空间使用 三.C的输入与输出 1.<iostream> 2.流 3.std(standard) 四.缺省参数 1.缺省参数的定义 2.全缺省/半缺省 3.声明与定义 ​五.函数重载 1.参数个数不同 2.参数类型不…...

ADC采集模块与MCU内置ADC性能对比

2.5V基准电压源&#xff1a; 1. 精度更高&#xff0c;误差更小 ADR03B 具有 0.1% 或更小的初始精度&#xff0c;而 电阻分压方式的误差主要来自电阻的容差&#xff08;通常 1% 或 0.5%&#xff09;。长期稳定性更好&#xff0c;分压电阻容易受到温度、老化的影响&#xff0c;长…...

Gartner发布2025年网络安全六大预测

文章目录 前言趋势1&#xff1a;生成式AI推动数据安全计划趋势2&#xff1a;管理机器身份趋势3&#xff1a;战术型AI趋势4&#xff1a;优化网络安全技术趋势5&#xff1a;扩大安全行为与文化计划的价值趋势6&#xff1a;应对网络安全倦怠 前言 Gartner发布2025年网络安全六大预…...

C#批量压缩并上载CSV数据文件到Box企业云盘

C# .NET 8实现Windows下批量压缩csv文件为zip文件&#xff0c;然后异步上传到box企业云服务网盘路径&#xff0c;实现异常处理和写入运行状态日志&#xff0c;参数来自ini配置文件。 C# .NET 8代码示例&#xff0c;包含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> #…...

结构型模式---享元模式

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

2025年渗透测试面试题总结- 深某服-漏洞研究员实习(题目+回答)

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

(13)Anaconda 安装配置详解

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

MWC 2025 | 移远通信大模型解决方案加速落地,引领服务机器人创新变革

随着人工智能、大模型等技术的蓬勃发展&#xff0c;生成式AI应用全面爆发。在此背景下&#xff0c;服务机器人作为大模型技术在端侧落地的关键场景&#xff0c;迎来了前所未有的发展机遇。 作为与用户直接交互的智能设备&#xff0c;服务机器人需要应对复杂场景下的感知、决策和…...

[内网安全] Windows 域认证 — Kerberos 协议认证

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

[Computer Vision]实验七:图像检索

目录 一、实验内容 二、实验过程 2.1 准备数据集 2.2 SIFT特征提取 2.3 学习“视觉词典”&#xff08;vision vocabulary&#xff09; 2.4 建立图像索引并保存到数据库中 2.5 用一幅图像查询 三、实验小结 一、实验内容 实现基于颜色直方图、bag of word等方法的以图搜…...

C++之thread_local变量

C之thread_local变量_c threadlocal-CSDN博客 thread_local简介 thread_local 是 C11 为线程安全引进的变量声明符。表示对象的生命周期属于线程存储期。 线程局部存储(Thread Local Storage&#xff0c;TLS)是一种存储期(storage duration)&#xff0c;对象的存储是在…...

【国产Linux | 银河麒麟】麒麟化龙——KylinOS下载到安装一条龙服务,起飞!

&#x1f5fa;️博客地图 &#x1f4cd;一、下载地址 &#x1f4cd;二、 系统安装 本文基于Windows操作系统vmware虚拟机安装 一、下载地址 官网&#xff1a;产品试用申请国产操作系统、麒麟操作系统——麒麟软件官方网站 下载自己需要的版本&#xff0c;完成后&#xff0c…...

(接“使用js去复制网页内容的方法”)js中的execCommand怎么复制富文本内容解析

document.execCommand(copy) 是传统的剪贴板操作方法&#xff0c;但它主要用于复制纯文本内容。如果你想复制富文本内容&#xff08;包括 HTML 标签和样式&#xff09;&#xff0c;需要结合一些技巧来实现。以下是具体方法&#xff1a; 方法&#xff1a;通过创建隐藏的富文本元…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

Mysql故障排插与环境优化

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