基于SpringBoot实现文件秒传功能

目录

• 前言
• 文件秒传原理
• 代码实现
• 1. 创建项目基础结构
• 2. 创建上传存储代码
• 3. 创建Result类
• 4. 创建Controller控制器
• 4. 创建纯html前端页面
• 5. 配置文件
• 效果
• 第一次上传
• 第二次上传

前言

在开发Web应用时，文件上传是一个常见需求。然而，当用户需要上传大文件或相同文件多次时，会造成带宽浪费和服务器存储冗余。此时可以使用文件秒传技术通过识别重复文件，实现瞬间完成上传的效果，大大提升了用户体验和系统效率。

文件秒传原理

文件秒传的核心原理是：

• 计算文件唯一标识（通常是MD5或SHA256值）
• 上传前先检查服务器是否已存在相同标识的文件
• 若存在，则直接引用已有文件，无需再次上传
• 若不存在，则执行常规上传流程

这种方式能显著减少网络传输和避免存储冗余。

代码实现

1. 创建项目基础结构

首先创建Spring Boot项目，添加必要依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>2.7.18</version>
    </dependency>
    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.8.1</version>
    </dependency>
</dependencies>

2. 创建上传存储代码

此处使用一个简单的集合来存储文件信息，实际使用需要替换为数据库或其他持久化中间件。

import cn.hutool.crypto.digest.DigestUtil;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import Java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Service
public class FileService {
    
    // 使用Map存储文件信javascript息，key为MD5，value为文件信息（实际使用时可替换为数据库存储）
    private final Map<String, FileInfo> fileStore = new ConcurrentHashMap<>();
    
    /**
     * 检查文件是否已存在
     */
    public FileInfo findByMd5(String md5) {
        return fileStore.get(md5);
    }
    
    /**
     * 保存文件信息
     */
    public FileInfo saveFile(String fileName, String fileMd5, Long fileSize, String filePath) {
        FileInfo fileInfo = new FileInfo(fileName, fileMd5, fileSize, filePath);
        fileStore.put(fileMd5, fileInfo); // 实际使用时插入数据库
        return fileInfo;
    }
    
    /**
     * 计算文件MD5
     */
    public String calculateMD5(MultipartFile file) throws IOException {
        return DigestUtil.md5Hex(file.getInputStream());
    }
}

定义一个简单的文件信息实体类：

import cn.hutool.core.util.IdUtil;

public class FileInfo {

    private String id = IdUtil.fastUUID();
    private String fileName;
    private String fileMd5;
    private Long fileSize;
    private String filePath;

    public FileInfo(String fileName, String fileMd5, Long fileSize, String filePath) {
        this.fileName = fileName;
        this.fileMd5 = fileMd5;
        this.fileSize = fileSize;
        this.filePath = filePath;
    }

    public String getId() {
   编程客栈     return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getFileMd5() {
        return fileMd5;
    }

    public void setFileMd5(String fileMd5) {
        this.fileMd5 = fileMd5;
    }

    public Long getFileSize() {
        return fileSize;
    }

    public void setFileSize(Long fileSize) {
        this.fileSize = fileSize;
    }

    public String getFilePath() {
        return filePath;
    }

    public void setFilePath(String filePath) {
        this.filePath = filePath;
    }
}

3. 创建Result类

为了统一返回结果格式，可以创建一个简单的Result类。

public class Result {
    private boolean success;
    private Object data;
    private String message;

    public Result(boolean success, Object data, String message) {
        this.success = succ编程客栈ess;
        this.data = data;
        this.message = message;
    }

    public static Result success(Object data) {
        return new Result(true, data,"success");
    }

    public static Result success(Object data,String message) {
        return new Result(true, data,message);
    }

    public static Result error(String message) {
        return new Result(false, null, message);
    }

    // Getters
    public boolean isSuccess() { return success; }
    public Object getData() { return data; }
    public String getMessage() { return message; }
}

4. 创建Controller控制器

import cn.hutool.core.io.FileUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;

@RestController
@RequestMapping("/api/file")
public class FileController {

    private static Logger logger = LoggerFactory.getLogger(FileController.class);

    @Autowired
    private FileService fileService;

    /**
     * 检查文件是否已存在
     */
    @PostMapping("/check")
    public Result checkFile(@RequestParam("md5") String md5) {
        FileInfo fileInfo = fileService.findByMd5(md5);
        if (fileInfo != null) {
            return Result.success(fileInfo);
        }
        return Result.success(null);
    }
    
    /**
     * 上传文件
     */
    @PostMapping("/upload")
    public Result uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            // 计算文件MD5值
            String md5 = fileService.calculateMD5(file);
            
            // 检查文件是否已存在
            FileInfo existFile = fileService.findByMd5(md5);
            if (existFile != null) {
                // todo 进行自定义的逻辑处理
                return Result.success(existFile,"文件秒传成功");
            }
            
            // 文件不存在，执行上传
            String originalFilename = file.getOriginalFilename();
            String filePath = FileUtil.getTmpDir() + File.separator + originalFilename; // 保存到临时目录
            
            // 存储文件
            file.transferTo(new File(filePath));
            
            // 保存文件信息到内存（实际使用时应替换为数据库）
            FileInfo fileInfo = fileService.saveFile(originalFilename, md5, file.getSize(), filePath);
            return Result.success(fileInfo,"文件上传成功");
        } catch (Exception e) {
            logger.error(e.getMessage(),e);
            return Result.error("文件上传失败：" + e.getMessage());
        }
    }
}

4. 创建纯HTML前端页面

创建一个简单的HTML上传页面：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文件秒传示例</title>
    <script src="https://cdn.jsdelivr.net/npm/axIOS/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
</head>
<body>
    <h2>文件上传（支持秒传）</h2>
    <input type="file" id="fileInput" />
    <button onclick="uploadFile()">上传文件</button>
    <div id="progressBar">
        <div>上传进度：<span id="progress">0%</span></div>
    </div>
    <div id="result"></div>
    <script>
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请选择文件');
                return;
            }
            
            document.getElementById('progressBar').style.display = 'block';
            document.getElementById('result').innerText = '计算文件MD5中...';

            // 计算文件MD5
            calculateMD5(file).then(md5 => {
                document.getElementById('result').innerText = '正在检查文件是否已存在...';
                
                // 检查文件是否已存在
                return axios.post('/api/file/check', {
                    md5: md5
                }).then(response => {
                    if (response.data.data && response.data.data.id) {
                        // 文件已存在，执行秒传
                        document.getElementById('result').innerText = '文件秒传成功！';
                        document.getElementById('progress').innerText = '100%';
                        return Promise.resolve();
                    } else {
                        // 文件不存在，执行上传
                        const formData = new FormData();
                        formData.append('file', file);
                        
                        return axios.post('/api/file/upload', formData, {
                            onUploadProgress: progressEvent => {
                                const percentCompleted = Math.round(
                                    (progressEvent.loaded * 100) / progressEvent.total
                                );
                                document.getElementById('progress').innerText = percentCompleted + '%';
                            }
                        }).then(response => {
                            document.getElementById('result').innerText = '文件上传成功！';
                        });
                    }
                });
            }).catch(error => {
                document.getElementById('result').innerText = '错误：' + error.message;
            });
        }
        
        // 计算文件MD5
        function calculateMD5(file) {
            return new Promise((resolve, reject) => {
                const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
                const chunkSize = 2097152; // 2MB
                const chunks = Math.ceil(file.size / chunkSize);
                let currentChunk = 0;
                const spark = new SparkMD5.ArrayBuffer();
                const fileReader = new FileReader();
                
                fileReader.onload = function(e) {
            http://www.devze.com        spark.append(e.target.result);
                    currentChunk++;
                    
                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        resolve(spark.end());
                    }
                };
                
                fileReader.onerror = function() {
                    reject('文件读取错误');
                };
                
                function loadNext() {
                    const start = currentChunk * chunkSize;
                    const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
                    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                }
                
                loadNext();
            });
        }
    </script>编程客栈;
</body>
</html>

5. 配置文件

在application.yml中添加必要配置

server:
  port: 8080

spring:
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

效果

第一次上传

第二次上传

到此这篇关于基于SpringBoot实现文件秒传功能的文章就介绍到这了,更多相关SpringBoot文件秒传内容请搜索编程客栈(www.devze.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)！