【文件上传】大文件分片上传、断点续传、秒传前后端实现_novelweb

201 阅读5分钟

整个流程如下:
校验文件上传状态: 前端生成该文件的MD5密文并进行分片,上传之前请求check-md5接口,传入文件名和密文,接口校验文件是未上传 或 上传了一部分 或 已上传完成三个状态,其中未上传返回自定义状态码404,上传一部分则返回状态206+未上传的分片ID,上传完成则返回状态200。
前端逐片上传: 校验完成后,根据校验结果对未上传的分片进行逐个上传,上传分片时参数主要是:总片数、当前片ID、片文件

上传接口: 上传接口会先去获取并解析该文件的conf文件(conf文件是RandomAccessFile,该类是通过提供指针的方式操作文件,文件存储的是一个二进制数组,所以可以用来数组下标标记片ID),使用setLength方法设置conf文件长度,使用seek方法跳到当前上传的片ID的位置,把该位置的值替换成127,然后将该分片使用指针偏移的方式插入到_tmp临时文件(临时文件也是RandomAccessFile文件)中,然后校验是否所有的片都上传完成,是则修改临时文件为正式文件名,至此上传完成,否则直接返回该分片上传完成

上传进度: 前端收到当前片的响应结果后,会根据已上传片数量获取到上传进度

MD5的用法: 以上就是分片上传的全部过程,其中本项目中,文件MD5并没有派上用场,原因是我这里是使用文件名做区分的,这样的弊端就是如果上传同名文件但是内容不同时,仍然会走秒传功能;解决办法是可以使用checkFileMd5(String fileMd5, String fileName)方法和fragmentFileUploader(UploadFileParam param, long chunkSize, HttpServletRequest request)方法配合使用,这样可以识别非同一文件但同名的文件上传,或者上传时前端传入一个唯一ID作为上传后的文件名。

2.1 前段代码

组件版本:web-uploader.min-0.1.6.js 、jquery-3.3.1.min.js
web-uploader官方地址
项目结构:
在这里插入图片描述
坑点:
WebUploader.Uploader.register要放到 WebUploader.create之前,否则注册的插件是不起作用的。

文件上传页面

文件上传

选择文件

前端渲染效果:
在这里插入图片描述

2.1 后端实现

2.1.1、校验文件上传状态
confFilePath:conf文件保存的路径;
savePath:文件保存的路径;

public Result checkFileMd5(String md5, String fileName) { try { cn.novelweb.tool.http.Result result = LocalUpload.checkFileMd5(md5, fileName, confFilePath, savePath); return NovelWebUtils.forReturn(result); } catch (Exception e) { log.error(e.getMessage(), e); } return Results.newFailResult(ErrorCode.FILE_UPLOAD, "上传失败"); }

下面是文件和配置文件保存的目录:
在这里插入图片描述
还没有上传完成的临时文件:
在这里插入图片描述
检验代码:

/** * 秒传、断点的文件MD5验证 * 根据文件路径获取要上传的文件夹下的 文件名.conf 文件 * 通过判断 *.conf 文件状态来验证(有条件的可以使用redis来记录上传状态和文件地址) * * @param fileMd5 文件的MD5 * @param fileName 文件名(包含文件格式) * @param confFilePath 分片配置文件全路径(不包含文件名) * @param tmpFilePath 上传的缓存文件全路径(不包含文件名) * @return 返回文件MD5验证状态 * 200:文件已存在、文件已上传成功、可以执行秒传 * 206:文件已经上传了一部分、上传了部分分片文件、未上传完整的文件 * 404:文件不存在、文件没有被上传过、第一次上传 * @throws Exception 抛出自定义Exception异常 */ public static Result<?> checkFileMd5(String fileMd5, String fileName, String confFilePath, String tmpFilePath) throws Exception { boolean isParamEmpty = StringUtils.isBlank(fileMd5) || StringUtils.isBlank(fileName) || StringUtils.isBlank(confFilePath) || StringUtils.isBlank(tmpFilePath); if (isParamEmpty) { throw new Exception("参数值为空"); } // 构建分片配置文件对象 File confFile = new File(confFilePath + File.separatorChar + fileName + ".conf");

// 布尔值:上传的文件缓存对象是否存在 boolean isTmpFileEmpty = new File(tmpFilePath

  • File.separatorChar + fileName + "_tmp").exists();

// 分片记录文件 和 文件缓存文件 同时存在 则 状态码定义为 206 if (confFile.exists() && isTmpFileEmpty) { byte[] completeList = FileUtils.readFileToByteArray(confFile); List missChunkList = new LinkedList(); for (int i = 0; i < completeList.length; i++) { if (completeList[i] != Byte.MAX_VALUE) { missChunkList.add(Integer.toString(i)); } } JSONArray jsonArray = JSON.parseArray(JSONObject.toJSONString(missChunkList));

return Result.ok(HttpStatus.PARTIAL_CONTENT.value(), "文件已经上传了一部分", jsonArray); }

// 布尔值:上传的文件对象是否存在 boolean isFileEmpty = new File(tmpFilePath + File.separatorChar + fileName) .exists();

// 上传的文件 和 配置文件 同时存在 则 当前状态码为 200 if (isFileEmpty && confFile.exists()) { return Result.ok(HttpStatus.OK.value(), "文件已上传成功"); } return Result.ok(HttpStatus.NOT_FOUND.value(), "文件不存在"); }

深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

img img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化的资料的朋友,可以戳这里获取