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(), "文件不存在"); }
2.1.2、分片上传
分片上传代码：
public Result breakpointResumeUpload(UploadFileParam param, HttpServletRequest request) { try { // 这里的 chunkSize(分片大小) 要与前端传过来的大小一致 cn.novelweb.tool.http.Result result = LocalUpload.fragmentFileUploader(param, confFilePath, savePath, 5242880L, request); return NovelWebUtils.forReturn(result); } catch (Exception e) { log.error(e.getMessage(), e); }
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
