Java大文件上传方案(vue 饿了么):秒传、断点续传、分片上传!

7,208次阅读
没有评论

共计 7989 个字符,预计需要花费 20 分钟才能阅读完成。

前言

本篇文章是基于其他文章的基础上结合自己的理解写出来的, 如果哪里有问题请指出!

详细教程

秒传

1、什么是秒传

通俗的说,你把要上传的东西上传,服务器会先做 MD5 校验,如果服务器上有它就会进入秒传,想要不秒传,其实只要让 MD5 改变,就是对文件本身做一下修改(改名字不行),例如一个文本文件,你多加几个字,MD5 就变了,就不会秒传了.

2、本文实现的秒传核心逻辑

a、利用 redis 的 set 方法存放文件上传状态,其中 key 为文件上传的 md5,value 为是否上传完成的标志位,

b、当标志位 true 为上传已经完成,此时如果有相同文件上传,则进入秒传逻辑。如果标志位为 false,则表示当前分片没有上传, 则进入上传逻辑.

分片上传

1. 什么是分片上传

分片上传,就是将所要上传的文件,按照一定的大小,将整个文件分隔成多个数据块(我们称之为 Part)来进行分别上传,上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

2. 分片上传的场景

1. 大文件上传

2. 网络环境环境不好,存在需要重传风险的场景.

断点续传

1、什么是断点续传

断点续传是在下载或上传时,将下载或上传任务(一个文件或一个压缩包)人为的划分为几个部分,每一个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传或者下载未完成的部分,而没有必要从头开始上传或者下载。本文的断点续传主要是针对断点上传场景。

2、应用场景

断点续传可以看成是分片上传的一个衍生,因此可以使用分片上传的场景,都可以使用断点续传。

3、实现断点续传的核心逻辑

在分片上传的过程中,如果因为系统崩溃或者网络中断等异常因素导致上传中断,这时候服务端需要记录上传的进度。在之后支持再次上传时,可以继续从上次上传中断的地方进行继续上传。(秒传逻辑已经记录在了 redis, 就不用记录了.)

为了避免客户端在上传之后的进度数据被删除而导致重新开始从头上传的问题,服务端提供相应的接口便于客户端对分片数据进行查询,从而使客户端知道已经上传的分片数据,从而从下一个没有上传的分片数据开始继续上传。

4、实现流程步骤

1. 本文实现的步骤
  • 前端(客户端)需要根据固定大小对文件进行分片,请求后端(服务端)时要带上分片序号和大小

  • 服务端创建 conf 文件用来记录分块位置,conf 文件长度为总分片数,每上传一个分块即向 conf 文件中写入一个 127,那么没上传的位置就是默认的 0, 已上传的就是 Byte.MAX_VALUE 127(这步是实现断点续传和秒传的核心步骤)

  • 服务器按照请求数据中给的分片序号和每片分块大小(分片大小是固定且一样的)算出开始位置,与读取到的文件片段数据,写入文件。

2. 分片上传 / 断点上传代码实现

a、前端框架使用的是 vue+ 饿了么 UI,进行分片。

b、后端实现文件写入,是用 RandomAccessFile,和 MappedByteBuffer 实现。

前端 (客户端) 大概流程:

对文件进行指定大小分片 ->循环调用分片次数 ->计算文件内容的 MD5 值 ->调用服务器接口将 MD5 值传递查询服务器是否有相同文件 ->否?->进入上传逻辑 ->是?->什么也不干, 进入下个分片检测

前端代码片段(代码垃圾, 大佬勿怪, 有哪里需要改的帮忙指出下谢谢)

async function updateFile(file) {

		// 将文件切分成小块进行上传
		// 每个分片的大小,这里设置的全局大小
		const chunkSize = store.state.config.fileChunkSize;
		const fileSize = file.size;
		// 总分片数
		totalChunks.value = Math.ceil(fileSize / chunkSize);
		// 截取文件名称等参数
		const parts = file.name.split(".");
		const fileName = parts[0];
		const fileType = parts[parts.length - 1];
		// 判断是不是秒传
		let secCount = 0;
		for (var i = 0; i  {console.log(typeof (result.data));
				if (result.code == 200) {
					// 返回 true 表示上传过
					verify = result.data;
					currentChunk.value++;
				} else {console.log("分片 md5 验证失败!");
					progressData.progressBar = false;
				}
			})
			// 没上传过在调用上传接口
			if (verify) {
				secCount++;
				console.log("已经上传过进入秒传模式!");
				if (secCount == totalChunks.value) {console.log("全部都是秒传");
					progressData.percentage = 100;
					ElMessage.success("上传成功");
					progressData.progressBar = false;
				}
				else {
					// 计算进度条进度
					progressData.percentage = Math.floor((100 / totalChunks.value)) * secCount + Math.floor((100 / totalChunks.value));
				}
			} else {
				// 组装数据
				const formData = new FormData();
				formData.append('md5', md5);
				formData.append('file', partFile);
				formData.append('chunk', i);
				formData.append('chunkSize', chunkSize);
				formData.append('totalChunks', totalChunks.value);
				formData.append('fileType', fileType);
				formData.append('fileName', fileName);
				formData.append('fileSize', fileSize);

				// 开始上传
				await fileUpload(formData).then(result => {console.log(result);
					if (result.code == 200) {if (i == totalChunks.value - 1) {
							progressData.progressBar = false;
							progressData.percentage = 100;
						}
						console.log("分片上传成功!");
					} else {console.log("分片上传失败!");

					}
				});
			}
		}
	}

	/** 计算分片文件 MD5
	 * @param {Object} fileSlice
	 */
	async function computeFileSliceMD5(fileSlice) {return new Promise((resolve, reject) => {const reader = new FileReader();

			reader.onload = function (e) {
				const arrayBuffer = e.target.result;
				const spark = new SparkMD5.ArrayBuffer();
				spark.append(arrayBuffer);
				const blockMD5 = spark.end();
				resolve(blockMD5);
			};

			reader.onerror = function (error) {console.error('Error reading file:', error);
			};

			reader.readAsArrayBuffer(fileSlice);
		});
	}

后端 (服务端) 大概流程:

获取到后端传递的参数 ->将 format 参数转换对象 ->提前将当前文件的 MD5 存到 redis 和数据库状态为为上传状态 ->通过偏移量计算出文件位置, 将当前数据写入到服务器 ->检测文件是否完成

后端代码片段(代码垃圾, 大佬勿怪, 有哪里需要改的帮忙指出下谢谢)

    public boolean fileShardingUpload(MultipartFile file, MultiValueMap formData) {
        
        // 对象转换
        FileUploadRequest param = converData(formData);

        // 上传文件逻辑
        MappedByteBuffer mappedByteBuffer = null;
        try (RandomAccessFile tempRaf = new RandomAccessFile(FileUploadUtil.createTmpFile(param), "rw"); FileChannel fileChannel = tempRaf.getChannel()) {
            // 新增分片记录
            saveFileShardingRecord(param);
            
            // 设置默认值
            long chunkSize = Objects.isNull(param.getChunkSize()) ? 5 * 1024 * 1024 : param.getChunkSize();
            // 写入该分片数据
            // 计算该分片数据的偏移量
            long offset = chunkSize * param.getChunk();
            // 读取文件数据
            byte[] fileData = file.getBytes();
            // 映射文件
            mappedByteBuffer = fileChannel.map(FileChannel.MapMode.READ_WRITE, offset, fileData.length);
            // 写数据
            mappedByteBuffer.put(fileData);

            // 判断是否上传完成
            boolean isok = FileUploadUtil.checkAndSetUploadProgress(param);
            if (isok) {// 上传成功, 记录文件的完整记录, 并且将文件丢到 minio(后面看看有没有直接存到 minio 然后合并的)
                saveFileInfo(param);
            }
            // 保存数据库操作(分片信息也要记录)
            updateFileShardingRecord(param);
            return isok;
        } catch (IOException e) {log.error(e.getMessage(), e);
            throw new RuntimeException("文件上传失败!");
        } finally {
            // 这是一个坑不关闭, 会一直占用
            try {Method m = FileChannelImpl.class.getDeclaredMethod("unmap", MappedByteBuffer.class);
                m.setAccessible(true);
                m.invoke(FileChannelImpl.class, mappedByteBuffer);
            } catch (Exception e) {log.error(e.getMessage(), e);
            }
        }

    }

 /**
     * 转换数据
     * @param formData
     * @return
     */
    private FileUploadRequest converData(MultiValueMap formData) {FileUploadRequest req = new FileUploadRequest();
        req.setMd5(formData.getFirst("md5").toString());
        req.setChunk(Integer.parseInt(formData.getFirst("chunk").toString()));
        req.setChunkSize(Long.valueOf((formData.getFirst("chunkSize").toString())));
        req.setTotalChunks(Integer.parseInt(formData.getFirst("totalChunks").toString()));
        req.setFileType(formData.getFirst("fileType").toString());
        req.setFileName(formData.getFirst("fileName").toString());
        req.setFileSize(formData.getFirst("fileSize").toString());
        req.setFileTepPath(fileTemPath);
        return req;
    }

/**
     * 新增分片记录
     *
     * @param param 文件对象
     */
    private void saveFileShardingRecord(FileUploadRequest param) {
        // 提前设置文件状态
        FileUploadUtil.beforeSetUploadProgressRedis(param);

        // 保存数据库
        FileShardingRecord fileShardingRecord = new FileShardingRecord();
        fileShardingRecord.setMd5(param.getMd5());
        fileShardingRecordMapper.insert(fileShardingRecord);

    }

  /**
     * 修改分片记录状态
     *
     * @param param 文件对象
     */
    private void updateFileShardingRecord(FileUploadRequest param) {FileShardingRecord fileShardingRecord = new FileShardingRecord();
        fileShardingRecord.setMd5(param.getMd5());
        fileShardingRecord.setStatus(1);
        fileShardingRecordMapper.updateByMd5(fileShardingRecord);

    }
FileUploadUtil 类
public class FileUploadUtil {


    /**
     * 创建临时文件
     *
     * @param param 前端传递的对象
     * @return
     * @throws IOException
     */
    public static File createTmpFile(FileUploadRequest param) throws IOException {String fileName = param.getFileName();
        String tempFile = param.getFileTepPath() + fileName + "_tmp." + param.getFileType();
        // 创建 Path 对象
        Path path = Paths.get(tempFile);
        // 检查文件是否存在
        boolean exists = Files.exists(path);
        if (!exists) {Files.createFile(path);
        }
        return path.toFile();}

    /**
     * 创建 conf 记录文件
     *
     * @param param
     * @return
     * @throws IOException
     */
    public static File createConfFile(FileUploadRequest param) throws IOException {String fileName = param.getFileName();
        String uploadDirPath = param.getFileTepPath();
        String tempConfFile = uploadDirPath + fileName + "_tmp.conf";

        param.setFileTepConfPath(tempConfFile);
        // 创建 Path 对象
        Path path = Paths.get(tempConfFile);
        // 检查文件是否存在
        boolean exists = Files.exists(path);
        if (!exists) {Files.createFile(path);
        }
        return path.toFile();}



    /**
     * 检查文件的 md5 值
     *
     * @param md5 md5
     * @return 是否上传完成
     */
    public static boolean checkFileMd5(String md5) {
        // 和 Redis 存储得做比较看看有没有上传...
        RedisUtil redisUtil = (RedisUtil) GlobalCache.getStaticCache().getIfPresent("redisUtil");
        // 获取 redis 记录
        Object hget = redisUtil.hget(RedisEnum.UploadFileStatus.getContent(), md5);

        if (Objects.nonNull(hget)) {if (hget.equals("true")) {log.info("文件已经上传");
                return true;
            }
        }
        return false;
    }


    /**
     * 检查并修改文件上传进度
     */
    public static boolean checkAndSetUploadProgress(FileUploadRequest param) throws IOException {
        // 创建 conf 记录文
        File confFile = createConfFile(param);
        // 是否完成
        byte isComplete = Byte.MAX_VALUE;

        try (RandomAccessFile accessConfFile = new RandomAccessFile(confFile, "rw");) {
            // 把该分段标记为 true 表示完成
            System.out.println("set part" + param.getChunk() + "complete");
            // 创建 conf 文件文件长度为总分片数,每上传一个分块即向 conf 文件中写入一个 127,那么没上传的位置就是默认 0, 已上传的就是 Byte.MAX_VALUE 127
            accessConfFile.setLength(param.getTotalChunks());
            accessConfFile.seek(param.getChunk());
            accessConfFile.write(Byte.MAX_VALUE);

            //completeList 检查是否全部完成, 如果数组里是否全部都是 127(全部分片都成功上传)
            byte[] completeList = FileUtil.readAsByteArray(confFile);

            for (int i = 0; i 

fileUploadRequest 类

@Data
public class FileUploadRequest {

    /**
     * 文件名称
     */
    private String fileName;

    /**
     * 文件临时路径
     */

    private String fileTepPath;

    /**
     * 文件临时配置路径
     */

    private String fileTepConfPath;

    /**
     * 文件类型
     */
    private String fileType;

    /**
     * 文件大小
     */

    private String fileSize;


    /**
     * 文件 md5
     */
    private String md5;

    /**
     * 当前块数
     */
    private Integer  chunk;

    /**
     * 分片得大小
     */

    private Long chunkSize;
    /**
     * 总块数
     */
    private Integer totalChunks;

}

总结

本文只提供分片上传思路, 代码具体以项目逻辑为主.

原文地址: Java 大文件上传方案(vue 饿了么):秒传、断点续传、分片上传!

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-07发表,共计7989字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)