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

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

news 2025/7/5 19:01:19

一、需求背景

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

避免重复文件占用存储空间
提升上传效率减少带宽消耗

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

重复文件仍然消耗上传时间
服务器重复校验增加计算压力
大文件上传体验较差

二、实现思路

2.1 技术选型

MD5哈希算法：通过文件内容生成唯一指纹
分块计算：优化大文件处理效率
前端预处理：减轻服务器压力
Element Plus Upload：实现可视化上传组件

2.2 流程图解

graph TD
    A[选择文件] --> 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);
}