基于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 标签和样式),需要结合一些技巧来实现。以下是具体方法: 方法:通过创建隐藏的富文本元…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...

什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...

基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...