devbox
酷酷是懒虫
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio_springboot整合oss vue2 文件分片上传、秒传、断点续传

作者：酷酷是懒虫 | 2024-06-24 15:30:35

赞

踩

springboot整合oss vue2 文件分片上传、秒传、断点续传

一、前端

1. 计算文件的md5值

  前端页面使用的elment-plus的el-upload组件。

  1.     <el-upload action="#" :multiple="true" :auto-upload="false" :on-change="handleChange" :show-file-list="false">
  2.       <FileButton content="上传文件" type="primary" class="file-button" />
  3.     </el-upload>

当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。

  1. //处理文件上传
  2. const handleChange = async (uploadFile) => {
  3.  
  4.   //文件名字
  5.   let fileName = uploadFile.name
  6.  
  7.   //文件的大小
  8.   const fileSize = uploadFile.size || 0
  9.  
  10.  
  11.   //当前的文件对象
  12.   let fileItem = {}
  13.   fileItem.fileName = fileName
  14.   fileItem.fileSize = fileSize
  15.   fileItem.state = 1  //解码中
  16.   fileItem.progress = 0  //进度是0
  17.   fileItem.filePid = 102903232
  18.   fileItem.fileMd5 = ""
  19.   fileItem.uploadSize = 0
  20.  
  21.   fileUploadList.value.addFile(fileItem)
  22.  
  23.   //弹框显示
  24.   isVisible.value = true
  25.  
  26.   //获得文件的md5
  27.   if (uploadFile.raw) {
  28.     await generateMD5OfFile(uploadFile.raw).then(
  29.       res => {
  30.         fileItem.fileMd5 = res
  31.       }
  32.     )
  33.   }
  34.  
  35.  
  36.  
  37.   fileUploadList.value.addMd5(fileItem.fileName, fileItem.fileMd5)
  38.  
  39.   fileUploadList.value.changeFileState(fileItem.fileName, 2)
  40.  
  41.   //分片上传
  42.   let chunkTotals = Math.ceil(fileSize / chunkSize);
  43.  
  44.   //分片上传
  45.   if (chunkTotals > 0) {
  46.  
  47.     for (let chunkNumber = 0, start = 0; chunkNumber < chunkTotals; chunkNumber++, start += chunkSize) {
  48.       //文件最后的end
  49.       let end = Math.min(fileSize, start + chunkSize);
  50.       // el-mement - plus中，上传的文件就在raw里面
  51.       const files = uploadFile.raw?.slice(start, end)
  52.  
  53.       //上传的结果
  54.       const result = await uploadFileToServer(files, chunkNumber + 1, chunkTotals, fileName , getCurrentId(), fileItem.fileMd5,userId)
  55.       console.log(result.data)
  56.       console.log(result.data.data)
  57.       if (result.data.data.status === 1) {
  58.         // console.log("上传中")
  59.         //上传的进度
  60.         fileUploadList.value.changeProgress(fileItem.fileName, ((end / fileSize) * 100).toFixed(1))
  61.         //修改已经上传完成的文件大小
  62.         fileUploadList.value.changeUploadSize(fileItem.fileName, end)
  63.       
  64.       } else if (result.data.data.status === 3) {
  65.  
  66.         // console.log("上传成功！"),这里是弹窗显示的文件上传进度，可以适当修改
  67.         fileUploadList.value.changeFileState(fileItem.fileName, 3)  //上传完成
  68.         fileUploadList.value.changeProgress(fileItem.fileName, 100)  // 进度100%
  69.  
  70.         //通过main，进行刷新
  71.         $emit("addChangeNum")
  72.  
  73.         return ; //结束
  74.       } else {
  75.         message("上传失败", 'error')
  76.  
  77.         return;  //结束
  78.       }
  79.     }
  80.   }
  81. }

 计算文件的MD5值

  1. //计算文件的md5
  2. function generateMD5OfFile(file) {
  3.     return new Promise((resolve, reject) => {
  4.         let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,                        // Read in chunks of 2MB
  5.             chunks = Math.ceil(file.size / chunkSize),
  6.             currentChunk = 0,
  7.             spark = new SparkMD5.ArrayBuffer(),
  8.             fileReader = new FileReader();
  9.  
  10.         fileReader.onload = function (e) {
  11.             console.log('read chunk nr', currentChunk + 1, 'of', chunks);
  12.             spark.append(e.target.result);                   // Append array buffer
  13.             currentChunk++;
  14.  
  15.             if (currentChunk < chunks) {
  16.                 loadNext();
  17.             } else {
  18.                 resolve(spark.end())
  19.             }
  20.         };
  21.  
  22.         fileReader.onerror = function () {
  23.  
  24.             reject('MD5 calc error')
  25.         };
  26.  
  27.         function loadNext() {
  28.             let start = currentChunk * chunkSize,
  29.                 end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
  30.  
  31.             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  32.         }
  33.  
  34.         loadNext();
  35.     })
  36. }

2.计算文件切片数量

自定义文件切片大小 

  1. //默认分片大小
  2. const chunkSize = 5 * 1024 * 1024

3.分片上传文件

上传文件到服务器 

  1. // 上传文件到服务器
  2. const uploadFileToServer = async (file, chunkNumber, chunkTotal, fileName,filePid, fileMd5,userId) => {
  3.     const form = new FormData();
  4.  
  5.     // 这里的data是文件
  6.     form.append("file", file);
  7.     form.append("chunkNumber", chunkNumber);
  8.     form.append("chunkTotal", chunkTotal);
  9.     form.append("fileName", fileName)
  10.     form.append("fileMd5", fileMd5)
  11.     form.append("filePid", filePid)
  12.     form.append("userId", userId)
  13.  
  14.  
  15.     var result = await axios({
  16.         url: env_server_production + '/file/upload',
  17.         headers: { 'Content-Type': 'multipart/form-data' },
  18.         method: "post",
  19.         timeout: 1000000,
  20.         data: form
  21.     })
  22.  
  23.     return result
  24. }

4.实现相关文件的预览

可以简单的实现对一些文件的预览，比如图片、视频、word、pdf等等。

pdf:

等等

这里使用的是vue-office 

  1. <template>
  2.   <div class="preview-body">
  3.  
  4.     <!-- word -->
  5.     <vue-office-docx v-if="getFileType() == 1" :src="getFileUrl()" style="height: 400px;" @rendered="renderedHandler"
  6.       @error="errorHandler" />
  7.  
  8.     <!-- pdf -->
  9.     <vue-office-pdf v-else-if="getFileType() == 2" :src="getFileUrl()" style="height: 400px;"
  10.       @rendered="renderedHandler" @error="errorHandler" />
  11.  
  12.     <!-- iamge -->
  13.     <div v-else-if="getFileType() == 3">
  14.       <el-image :src="getFileUrl()" style="height: 100px; width: 100px;" :zoom-rate="1.2" :max-scale="7"
  15.         :min-scale="0.2" :preview-src-list="imageList" :initial-index="4" />
  16.       <br>
  17.       <el-text style="margin-left: 0px;" link type="primary">点击图片查看详情</el-text>
  18.     </div>
  19.  
  20.     <!-- 不支持显示 -->
  21.     <div v-else-if="getFileType() == 4">
  22.       <br>
  23.       该文件不支持在线浏览，请下载后查看!
  24.     </div>
  25.  
  26.     <!-- 视频 -->
  27.     <div v-else-if="getFileType() == 5">
  28.  
  29.         <video autoplay width="1200px" height="400px" controls 
  30.           :src="getFileUrl()"
  31.           id="myVideo"
  32.           >
  33.  
  34.         </video>
  35.  
  36.     </div>
  37.  
  38.     <!-- 文本显示 -->
  39.     <div v-else>
  40.       <el-scrollbar height="400px" class="document-preview">
  41.         <pre>{{ documentContent }}</pre>
  42.       </el-scrollbar>
  43.     </div>
  44.  
  45.   </div>
  46. </template>
  47.  
  48. <script setup>
  49. //引入相关样式
  50. import VueOfficeDocx from '@vue-office/docx'
  51. import VueOfficePdf from '@vue-office/pdf'
  52. import '@vue-office/docx/lib/index.css'
  53. import { ref } from 'vue'
  54. import axios from 'axios';
  55.  
  56.  
  57.  
  58. const props = defineProps(['file'])
  59. const video = document.getElementById("myVideo")
  60.  
  61.  
  62. const getFileUrl = () => {
  63.   return "http://60.205.141.200:9000/" + props.file.filePath;
  64. }
  65. const getFileType = () => {
  66.   let category = props.file.fileCategory
  67.  
  68.   if (category == 18 || category == 19) {
  69.     return 1
  70.   }
  71.   else if (category == 13)
  72.     return 2
  73.  
  74.   else if (category == 9 || category == 14 || category == 5) {
  75.     imageList.value.push(getFileUrl())
  76.     return 3
  77.   }
  78.   else if (category == 20 || category == 11 || category == 15)
  79.     return 4
  80.  
  81.   else if (category == 12) {
  82.     //视频
  83.     return 5
  84.   } else {
  85.     //文本
  86.     readDocumentContent();
  87.   }
  88.  
  89. }
  90.  
  91. const readDocumentContent = async () => {
  92.   var res = await axios.get(getFileUrl(), {
  93.     responseType: 'text',
  94.   })
  95.   documentContent.value = `\n${res.data}\n`
  96. }
  97. //文件中的内容
  98. const documentContent = ref('')
  99. //图片列表
  100. const imageList = ref([])
  101.  
  102. const renderedHandler = () => {
  103.   console.log("渲染成功")
  104. }
  105. const errorHandler = () => {
  106.   console.log("渲染失败")
  107. }
  108.  
  109. </script>
  110.  
  111. <style lang="scss" scoped>
  112. .document-preview {
  113.   margin-right: 100px;
  114.   background-color: #ccc;
  115.  
  116.   width: 1164px;
  117.   border: 2px solid #ccc;
  118.   height: 400px;
  119.   border-radius: 0 0 10px 10px;
  120.   text-align: left;
  121. }
  122. pre {
  123.   font-family: 'Microsoft YaHei';
  124. }
  125. </style>

二、后端

后端使用minio，minio先接收分片文件，上传完成所有的分片文件后，在合并分片文件，删除中间文件即可。

1.接收分片文件、合并文件。

  1. /**
  2.      * 上传文件方法。
  3.      * 该方法负责检查文件是否已存在，如果存在，则返回已存在标志；如果不存在且是完整文件，则上传文件到MinIO并保存文件信息到数据库。
  4.      *
  5.      * @param fileVO 文件相关信息VO，包含文件本身、MD5、文件名等。
  6.      * @return 如果文件已存在，返回秒传状态码；如果文件上传完成，返回上传完成状态码；否则返回null。
  7.      * @throws GeneralException 如果文件为空，抛出通用异常。
  8.      */
  9.     @Override
  10.     @Transactional(rollbackFor = Exception.class)  //所有的操作都在一个事务里面。
  11.     public HashMap<Object, Object> uploadFile(FileVO fileVO) {
  12.  
  13.         if(fileVO.getFile().isEmpty())
  14.             throw  new GeneralException("文件上传异常");
  15.  
  16.         FileInfo insertItem = new FileInfo();
  17.         Date now = new Date();
  18.         HashMap<Object, Object> map = new HashMap<>();
  19.  
  20.         //第一片文件
  21.         if(fileVO.getChunkNumber() == 1){
  22.             //先去数据库看看有没有这个文件
  23.             QueryWrapper<FileInfo> queryWrapper = new QueryWrapper<>();
  24.             queryWrapper.eq("file_md5", fileVO.getFileMd5());
  25.  
  26.             //通过Md5查询，别人是不是已经传过这个文件了(文件名不影响文件的MD5值)。
  27.             List<FileInfo> fileInfoList = fileInfoMapper.selectList(queryWrapper);
  28.             FileInfo fileInfo = null;
  29.             if(fileInfoList.size() > 0){
  30.                 fileInfo = fileInfoList.get(0);
  31.             }
  32.             //别人已经上传过这个文件了，直接秒传
  33.             if(fileInfo != null){
  34.                 log.info("服务器中有相同的文件，直接秒传");
  35.                 //说明minIO中有对应的文件
  36.                 insertItem.setUserId(fileVO.getUserId());
  37.                 insertItem.setFileMd5(fileVO.getFileMd5());
  38.                 insertItem.setFileName(fileInfo.getFileName());
  39.                 insertItem.setFileCategory(fileInfo.getFileCategory());
  40.                 insertItem.setFileId(StringUtil.getRandomString(10));
  41.                 insertItem.setDelFlag(FileDelFlagEnums.USING.getFlag());
  42.                 insertItem.setFilePid(fileVO.getFilePid());
  43.                 insertItem.setFilePath(fileInfo.getFilePath());
  44.                 insertItem.setCreateTime(now);
  45.                 insertItem.setFileSize(fileInfo.getFileSize());
  46.                 insertItem.setState(UploadStatus.UPLOAD_FINISH.getStatus());
  47.  
  48.  
  49.                 fileInfoMapper.insert(insertItem);
  50.                 System.err.println(insertItem);
  51.  
  52.                 map.put("status",UploadStatus.UPLOAD_FINISH.getStatus());
  53.                 map.put("fileId",insertItem.getFileId());
  54.                 return map;
  55.             }
  56.             //插入 一个切片
  57.             redisUtil.set(fileVO.getFileMd5(),0);
  58.         }
  59.  
  60.         if(Integer.parseInt(redisUtil.get(fileVO.getFileMd5()).toString()) >= fileVO.getChunkNumber()){
  61.             //说明这片文件已经上传过了。
  62.             map.put("status",UploadStatus.UPLOADING.getStatus());
  63.             return map;
  64.         }
  65.  
  66.         //只有一段，直接放到服务器就行
  67.         if(fileVO.getChunkTotal() == 1){
  68.             int lastDotIndex = fileVO.getFileName().lastIndexOf(".");
  69.             String type = fileVO.getFileName().substring(lastDotIndex + 1);
  70.  
  71.             String url = minioUtils.uploadFile(MessageConstant.MINIO_BUCKET,fileVO.getFileName(), fileVO.getFile());
  72.  
  73.             insertItem.setUserId(fileVO.getUserId());
  74.             insertItem.setFileMd5(fileVO.getFileMd5());
  75.             insertItem.setFileName(fileVO.getFileName());
  76.             insertItem.setFileCategory(FileCategoryEnums.getByCode(type).getCategory());
  77.             insertItem.setFileId(StringUtil.getRandomString(10));
  78.             insertItem.setDelFlag(FileDelFlagEnums.USING.getFlag());
  79.             insertItem.setFilePid(fileVO.getFilePid());
  80.             insertItem.setFilePath(url);
  81.             insertItem.setCreateTime(now);
  82.             insertItem.setFileSize(fileVO.getFile().getSize());
  83.             insertItem.setState(UploadStatus.UPLOAD_FINISH.getStatus());
  84.  
  85.             fileInfoMapper.insert(insertItem);
  86.  
  87.             //删除redis中的切片上传信息
  88.             redisUtil.del(fileVO.getFileMd5());
  89.             map.put("status",UploadStatus.UPLOAD_FINISH.getStatus());
  90.             map.put("fileId",insertItem.getFileId());
  91.  
  92.             return map;
  93.         }
  94.  
  95.         log.info("分片上传====> md5 :{} ,=====> index :{}",fileVO.getFileMd5(),fileVO.getChunkNumber());
  96.         //不止一片，继续上传
  97.         //放切片文件的目录是 文件的userId + md5值,这个是唯一的。
  98.         String objectName = fileVO.getUserId() + fileVO.getFileMd5() ;
  99.  
  100.         try {
  101.             minioUtils.putChunkObject(fileVO.getFile().getInputStream(), MessageConstant.MINIO_BUCKET, objectName + "/" + fileVO.getChunkNumber());
  102.         } catch (IOException e) {
  103.             throw new GeneralException("文件上传异常！");
  104.         }
  105.  
  106.         //最后一片，进行合并
  107.         if(Objects.equals(fileVO.getChunkNumber(), fileVO.getChunkTotal())){
  108.  
  109.             //获得文件类型
  110.             int lastDotIndex = fileVO.getFileName().lastIndexOf(".");
  111.             String type = fileVO.getFileName().substring(lastDotIndex + 1);
  112.  
  113.             //objectName : userId+md5
  114.             String filePath = minioUtils.composeObject(MessageConstant.MINIO_BUCKET,MessageConstant.MINIO_BUCKET,objectName, type);
  115.  
  116.  
  117.             insertItem.setUserId(fileVO.getUserId());
  118.             insertItem.setFileMd5(fileVO.getFileMd5());
  119.             insertItem.setFileName(fileVO.getFileName());
  120.             insertItem.setFileCategory(FileCategoryEnums.getByCode(type).getCategory());
  121.             insertItem.setFileId(StringUtil.getRandomString(10));
  122.             insertItem.setDelFlag(FileDelFlagEnums.USING.getFlag());
  123.             insertItem.setFilePid(fileVO.getFilePid());
  124.             insertItem.setFilePath(filePath);
  125.             insertItem.setCreateTime(now);
  126.             Long fileSize = MessageConstant.DEFAULT_CHUNK_SIZE * (fileVO.getChunkTotal() - 1) + fileVO.getFile().getSize();
  127.             insertItem.setFileSize(fileSize);
  128.             insertItem.setState(UploadStatus.UPLOAD_FINISH.getStatus());
  129.  
  130.             //插入一条数据
  131.             System.out.println(fileInfoMapper.insert(insertItem));
  132.  
  133.             //删除minio中的临时文件目录
  134.             System.out.println(minioUtils.deleteFolder(MessageConstant.MINIO_BUCKET, objectName));
  135.  
  136.             //删除redis中的切片上传信息
  137.             redisUtil.del(fileVO.getFileMd5());
  138.             map.put("status",UploadStatus.UPLOAD_FINISH.getStatus());
  139.             map.put("fileId",insertItem.getFileId());
  140.  
  141.             return map;
  142.         }
  143.  
  144.         //更新redis中的切片上传信息
  145.         redisUtil.incrby(fileVO.getFileMd5(),1);
  146.  
  147.         //上传中
  148.         map.put("status",UploadStatus.UPLOADING.getStatus());
  149.         return map;
  150.     }

如何做到秒传？

一个文件有个不重复的md5值，所谓的秒传其实就是你要上传的文件，别人已经上传过了，minio中已经有这个文件了，再解析完文件的md5值之后，后端发现数据库中md5存在了，所以就不用上传文件了，直接在数据库中创建一个信息即可，也就实现了秒传。

如何做到断点传递？

传统传递过程是一整个文件上传，如果中断了下次传的时候，需要重新上传；断点传递，每次传递的时候，可以把分片信息放到redis中，同时下一次传分片的时候，判断一下，redis中时候已经有了这个分片，如果有就不用上传此分片文件，即断点传递。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/753161
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号