vue上传视频插件

前言
文件上传是一个老生常谈的话题了 , 在文件相对比较小的情况下 , 可以直接把文件转化为字节流上传到服务器 , 但在文件比较大的情况下 , 用普通的方式进行上传 , 这可不是一个好的办法 , 毕竟很少有人会忍受 , 当文件上传到一半中断后 , 继续上传却只能重头开始上传 , 这种让人不爽的体验 。那有没有比较好的上传体验呢 , 答案有的 , 就是下边要介绍的几种上传方式
详细教程
秒传
1、什么是秒传
通俗的说 , 你把要上传的东西上传 , 服务器会先做MD5校验 , 如果服务器上有一样的东西 , 它就直接给你个新地址 , 其实你下载的都是服务器上的同一个文件 , 想要不秒传 , 其实只要让MD5改变 , 就是对文件本身做一下修改(改名字不行) , 例如一个文本文件 , 你多加几个字 , MD5就变了 , 就不会秒传了.
2、本文实现的秒传核心逻辑
分片上传
1.什么是分片上传
分片上传 , 就是将所要上传的文件 , 按照一定的大小 , 将整个文件分隔成多个数据块(我们称之为Part)来进行分别上传 , 上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件 。
2.分片上传的场景
断点续传
1、什么是断点续传
断点续传是在下载或上传时 , 将下载或上传任务(一个文件或一个压缩包)人为的划分为几个部分 , 每一个部分采用一个线程进行上传或下载 , 如果碰到网络故障 , 可以从已经上传或下载的部分开始继续上传或者下载未完成的部分 , 而没有必要从头开始上传或者下载 。本文的断点续传主要是针对断点上传场景 。
2、应用场景
断点续传可以看成是分片上传的一个衍生 , 因此可以使用分片上传的场景 , 都可以使用断点续传 。
3、实现断点续传的核心逻辑
在分片上传的过程中 , 如果因为系统崩溃或者网络中断等异常因素导致上传中断 , 这时候客户端需要记录上传的进度 。在之后支持再次上传时 , 可以继续从上次上传中断的地方进行继续上传 。
为了避免客户端在上传之后的进度数据被删除而导致重新开始从头上传的问题 , 服务端也可以提供相应的接口便于客户端对已经上传的分片数据进行查询 , 从而使客户端知道已经上传的分片数据 , 从而从下一个分片数据开始继续上传 。
4、实现流程步骤
5、分片上传/断点上传代码实现
后端进行写入操作的核心代码
【vue上传视频插件】@UploadMode(mode = UploadModeEnum.RANDOM_ACCESS)@Slf4jpublic class RandomAccessUploadStrategy extends SliceUploadTemplate {@Autowiredprivate FilePathUtil filePathUtil;@Value("${upload.chunkSize}")private long defaultChunkSize;@Overridepublic boolean upload(FileUploadRequestDTO param) {RandomAccessFile accessTmpFile = null;try {String uploadDirPath = filePathUtil.getPath(param);File tmpFile = super.createTmpFile(param);accessTmpFile = new RandomAccessFile(tmpFile, "rw");//这个必须与前端设定的值一致long chunkSize = Objects.isNull(param.getChunkSize()) ? defaultChunkSize * 1024 * 1024: param.getChunkSize();long offset = chunkSize * param.getChunk();//定位到该分片的偏移量accessTmpFile.seek(offset);//写入该分片数据accessTmpFile.write(param.getFile().getBytes());boolean isOk = super.checkAndSetUploadProgress(param, uploadDirPath);return isOk;} catch (IOException e) {log.error(e.getMessage(), e);} finally {FileUtil.close(accessTmpFile);}return false;}}