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

VUE+SPRINGBOOT实现断点续传，分片上传大文件_spring boot + vue 大文件上传

作者：笔触狂放9 | 2024-05-03 05:57:19

赞

踩

spring boot + vue 大文件上传

前端代码：

  1. <!--上传附件弹出框 -->
  2.     <el-dialog v-dialogDrag title="文件上传" center v-model="uploadVisible" width="60%" @close="handlerClose" destroy-on-close>
  3.       <UploadBigFile class="uploadSlot" @closeFileDialog="closeFileDialog"></UploadBigFile>
  4.     </el-dialog>

弹出框代码：

  1. <template>
  2.     <!-- 上传器 -->
  3.     <uploader
  4.         ref="uploader"
  5.         :options="options"
  6.         :autoStart=false
  7.         :file-status-text="fileStatusText"
  8.         @file-added="onFileAdded"
  9.         @file-success="onFileSuccess"
  10.         @file-progress="onFileProgress"
  11.         @file-error="onFileError">
  12.         <uploader-unsupport></uploader-unsupport>
  13.         <uploader-drop>
  14.             <div>
  15.                 <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">选择文件<i class="el-icon-upload el-icon--right"></i></uploader-btn>
  16.             </div>
  17.         </uploader-drop>
  18.         <uploader-list></uploader-list>
  19.     </uploader>
  20. </template>
  21.  
  22. <script>
  23.     import {ACCEPT_CONFIG} from '../../../assets/js/config';
  24.     import SparkMD5 from 'spark-md5';
  25.     import {mergeFile} from "@/api/tool/uploadFile";
  26.     import { getToken } from "@/utils/auth";
  27.  
  28.     export default {
  29.         data () {
  30.             return {
  31.                 options: {
  32.                     //目标上传 URL，默认POST
  33.                     target: process.env.VITE_APP_BASE_API +"/vm/chunk",
  34.                     //分块大小(单位：字节) 单个分片暂定200M
  35.                     chunkSize: '204800000',
  36.                     //上传文件时文件内容的参数名，对应chunk里的Multipart对象名，默认对象名为file
  37.                     fileParameterName: 'upfile',
  38.                     //失败后最多自动重试上传次数
  39.                     maxChunkRetries: 3,
  40.                     //是否开启服务器分片校验，对应GET类型同名的target URL
  41.                     testChunks: true,
  42.                     headers: { Authorization: "Bearer " + getToken() },
  43.                     /*
  44.                     服务器分片校验函数，判断秒传及断点续传,传入的参数是Uploader.Chunk实例以及请求响应信息
  45.                     reponse码是successStatuses码时，才会进入该方法
  46.                     reponse码如果返回的是permanentErrors 中的状态码，不会进入该方法，直接进入onFileError函数 ，并显示上传失败
  47.                     reponse码是其他状态码，不会进入该方法，正常走标准上传
  48.                     checkChunkUploadedByResponse函数直接return true的话，不再调用上传接口
  49.                     */
  50.                     checkChunkUploadedByResponse: function (chunk, response_msg) {
  51.                         // console.log("response_msg的值",response_msg)
  52.                         let objMessage = JSON.parse(response_msg);
  53.                         if (objMessage.skipUpload) {
  54.                             return true;
  55.                         }
  56.                         return (objMessage.uploadedChunks || []).indexOf(chunk.offset + 1) >= 0;
  57.                     }
  58.                 },
  59.                 attrs: {
  60.                     //上传文件的类型
  61.                     accept: ACCEPT_CONFIG.getAll()
  62.                 },
  63.                 fileStatusText: {
  64.                         success: '上传成功',
  65.                         error: '上传失败',
  66.                         uploading: '上传中',
  67.                         paused: '暂停',
  68.                         waiting: '等待上传'
  69.                 },
  70.             }
  71.         },
  72.         methods: {
  73.             onFileAdded(file) {
  74.                 this.computeMD5(file);
  75.             },
  76.             /*
  77.             第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
  78.             第二个参数 file 就是当前成功的 Uploader.File 对象本身；
  79.             第三个参数就是 message 就是服务端响应内容，永远都是字符串；
  80.             第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status就是
  81.             */
  82.             onFileSuccess(rootFile, file, response, chunk) {
  83.                 //refProjectId为预留字段，可关联附件所属目标，例如所属档案，所属工程等
  84.                 file.refProjectId = "ommb";
  85.                 this.$emit('closeFileDialog');
  86.  
  87.                 mergeFile(file).then( responseData=> {
  88.                     if(responseData === "Failure"){
  89.                         console.log("合并操作未成功");
  90.                     }
  91.                 }).catch(function (error){
  92.                     console.log("合并后捕获的未知异常："+error);
  93.                 });
  94.             },
  95.             onFileProgress(rootFile, file, chunk) {
  96.                 console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
  97.             },
  98.             onFileError(rootFile, file, response, chunk) {
  99.                 console.log('上传完成后异常信息：'+response);
  100.                 this.$message({
  101.                     message: response,
  102.                     type: 'error'
  103.                 })
  104.             },
  105.  
  106.             /**
  107.              * 计算md5，实现断点续传及秒传
  108.              * @param file
  109.              */
  110.             computeMD5(file) {
  111.                 file.pause();
  112.  
  113.                 //单个文件的大小限制2G
  114.                 let fileSizeLimit = 2 * 1024 * 1024 * 1024;
  115.                 // console.log("文件大小："+file.size);
  116.                 // console.log("限制大小："+fileSizeLimit);
  117.                 if(file.size > fileSizeLimit){
  118.                     this.$message({
  119.                         showClose: true,
  120.                         message: '文件大小不能超过2G'
  121.                     });
  122.                     file.cancel();
  123.                 }
  124.  
  125.                 let fileReader = new FileReader();
  126.                 let time = new Date().getTime();
  127.                 let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  128.                 let currentChunk = 0;
  129.                 const chunkSize = 10 * 1024 * 1000;
  130.                 let chunks = Math.ceil(file.size / chunkSize);
  131.                 let spark = new SparkMD5.ArrayBuffer();
  132.                 //由于计算整个文件的Md5太慢，因此采用只计算第1块文件的md5的方式
  133.                 let chunkNumberMD5 = 1;
  134.  
  135.                 loadNext();
  136.  
  137.                 fileReader.onload = (e => {
  138.                     spark.append(e.target.result);
  139.  
  140.                     if (currentChunk < chunkNumberMD5) {
  141.                         currentChunk++;
  142.                         loadNext();
  143.  
  144.                         // 实时展示MD5的计算进度
  145.                         this.$nextTick(() => {
  146.                             $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
  147.                         })
  148.                     } else {
  149.                         let md5 = spark.end();
  150.                         file.uniqueIdentifier = md5;
  151.                         file.resume();
  152.                         // console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
  153.                     }
  154.                 });
  155.  
  156.                 fileReader.onerror = function () {
  157.                     this.error(`文件${file.name}读取出错，请检查该文件`)
  158.                     file.cancel();
  159.                 };
  160.  
  161.                 function loadNext() {
  162.                     let start = currentChunk * chunkSize;
  163.                     let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
  164.  
  165.                     fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
  166.                     currentChunk++;
  167.                     // console.log("计算第"+currentChunk+"块");
  168.                 }
  169.             },
  170.             close() {
  171.                 this.uploader.cancel();
  172.             },
  173.  
  174.             /**
  175.              * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
  176.              * @param id
  177.              * @param status
  178.              */
  179.             statusSet(id, status) {
  180.                 let statusMap = {
  181.                     md5: {
  182.                         text: '校验MD5',
  183.                         bgc: '#fff'
  184.                     },
  185.                     merging: {
  186.                         text: '合并中',
  187.                         bgc: '#e2eeff'
  188.                     },
  189.                     transcoding: {
  190.                         text: '转码中',
  191.                         bgc: '#e2eeff'
  192.                     },
  193.                     failed: {
  194.                         text: '上传失败',
  195.                         bgc: '#e2eeff'
  196.                     }
  197.                 }
  198.  
  199.                 this.$nextTick(() => {
  200.                     $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
  201.                         'position': 'absolute',
  202.                         'top': '0',
  203.                         'left': '0',
  204.                         'right': '0',
  205.                         'bottom': '0',
  206.                         'zIndex': '1',
  207.                         'line-height': 'initial',
  208.                         'backgroundColor': statusMap[status].bgc
  209.                     }).text(statusMap[status].text);
  210.                 })
  211.             },
  212.             statusRemove(id) {
  213.                 this.$nextTick(() => {
  214.                     $(`.myStatus_${id}`).remove();
  215.                 })
  216.             },
  217.  
  218.             error(msg) {
  219.                 this.$notify({
  220.                     title: '错误',
  221.                     message: msg,
  222.                     type: 'error',
  223.                     duration: 2000
  224.                 })
  225.             }
  226.         }
  227.     }
  228. </script>
  229.  
  230. <style scoped>
  231.   .handle-box {
  232.     margin-bottom: 20px;
  233.   }
  234.  
  235.   .handle-select {
  236.     width: 120px;
  237.   }
  238.  
  239.   .handle-input {
  240.     width: 300px;
  241.     display: inline-block;
  242.   }
  243.  
  244.   .table {
  245.     width: 1200px;
  246.     font-size: 14px;
  247.   }
  248.  
  249.   .red {
  250.     color: #ff0000;
  251.   }
  252.  
  253.   .mr10 {
  254.     margin-right: 10px;
  255.   }
  256.  
  257.   .table-td-thumb {
  258.     display: block;
  259.     margin: auto;
  260.     width: 40px;
  261.     height: 40px;
  262.   }
  263.  
  264.   .uploadSlot {
  265.     margin: -10px 10px 10px 30px;
  266.   }
  267. </style>

后台代码：

  1. @Service
  2. public class SysChunkServiceImpl implements ISysChunkService {
  3.     private static final Logger logger = LoggerFactory.getLogger(SysChunkServiceImpl.class);
  4.  
  5.     /**
  6.      * 上传文件存储在本地的根路径
  7.      */
  8.     @Value("${file.path}")
  9.     private String localFilePath;
  10.  
  11.     @Autowired
  12.     private SysChunkMapper sysChunkMapper;
  13.     @Autowired
  14.     private VersionPackageMapper versionPackageMapper;
  15.  
  16.     /**
  17.      * 查询版本管理
  18.      *
  19.      * @param id 版本管理主键
  20.      * @return 版本管理
  21.      */
  22.     @Override
  23.     public SysChunk selectSysChunkById(String id) {
  24.         return sysChunkMapper.selectSysChunkById(id);
  25.     }
  26.  
  27.     /**
  28.      * 查询版本管理列表
  29.      *
  30.      * @param sysChunk 版本管理
  31.      * @return 版本管理
  32.      */
  33.     @Override
  34.     public List<SysChunk> selectSysChunkList(SysChunk sysChunk) {
  35.         return sysChunkMapper.selectSysChunkList(sysChunk);
  36.     }
  37.  
  38.     /**
  39.      * 新增版本管理
  40.      *
  41.      * @param sysChunk 版本管理
  42.      * @return 结果
  43.      */
  44.     @Override
  45.     public int insertSysChunk(SysChunk sysChunk) {
  46.         sysChunk.setId(SnowflakeIdWorker.getUUID());
  47.         return sysChunkMapper.insertSysChunk(sysChunk);
  48.     }
  49.  
  50.     /**
  51.      * 修改版本管理
  52.      *
  53.      * @param sysChunk 版本管理
  54.      * @return 结果
  55.      */
  56.     @Override
  57.     public int updateSysChunk(SysChunk sysChunk) {
  58.         return sysChunkMapper.updateSysChunk(sysChunk);
  59.     }
  60.  
  61.     /**
  62.      * 批量删除版本管理
  63.      *
  64.      * @param ids 需要删除的版本管理主键
  65.      * @return 结果
  66.      */
  67.     @Override
  68.     public int deleteSysChunkByIds(String[] ids) {
  69.         return sysChunkMapper.deleteSysChunkByIds(ids);
  70.     }
  71.  
  72.     /**
  73.      * 删除分片
  74.      *
  75.      * @param id 版本管理主键
  76.      * @return 结果
  77.      */
  78.     @Override
  79.     public int deleteSysChunkById(String id) {
  80.         return sysChunkMapper.deleteSysChunkById(id);
  81.     }
  82.  
  83.     @Override
  84.     public int deleteSysChunkByIdentifier(String identifier) {
  85.         return sysChunkMapper.deleteSysChunkByIdentifier(identifier);
  86.     }
  87.  
  88.     /**
  89.      * 删除版本管理信息
  90.      *
  91.      * @param versionPackage
  92.      * @return
  93.      */
  94.     @Transactional(rollbackFor = Exception.class)
  95.     @Override
  96.     public int deleteFile(VersionPackage versionPackage) {
  97.         //删除版本
  98.         versionPackageMapper.deleteVersionPackageByVersionId(versionPackage.getVersionId());
  99.         //删除版本分片
  100.         sysChunkMapper.deleteSysChunkByIdentifier(versionPackage.getIdentifier());
  101.         //删除版本存放的目录
  102.         FileUtils.delFile(versionPackage.getLocation());
  103.  
  104.         return 1;
  105.     }
  106.  
  107.     @Override
  108.     public String uploadChunk(SysChunk chunk) {
  109.         String apiRlt = VmConstants.SUCCESS_CODE;
  110.  
  111.         MultipartFile file = chunk.getUpfile();
  112.  
  113.         logger.info("file originName: {}, chunkNumber: {}", file.getOriginalFilename(), chunk.getChunkNumber());
  114.  
  115.         try {
  116.             byte[] bytes = file.getBytes();
  117.             Path path = Paths.get(generatePath(localFilePath, chunk));
  118.             //文件写入指定路径
  119.             Files.write(path, bytes);
  120.             if (insertSysChunk(chunk) < 0) {
  121.                 apiRlt = VmConstants.FAIL_CODE;
  122.             }
  123.  
  124.         } catch (IOException e) {
  125.             logger.error("uploadChunk IOException" , e);
  126.             apiRlt = VmConstants.FAIL_CODE;
  127.         }
  128.         return apiRlt;
  129.     }
  130.  
  131.     @Override
  132.     public UploadResult checkChunk(SysChunk chunk) {
  133.         UploadResult ur = new UploadResult();
  134.         //完整文件路径
  135.         String file = localFilePath + "/" + chunk.getIdentifier() + "/" + chunk.getFilename();
  136.  
  137.         //先判断整个文件是否已经上传过了，如果是，则告诉前端跳过上传，实现秒传
  138.         if (fileExists(file)) {
  139.             ur.setSkipUpload(true);
  140.             ur.setLocation(file);
  141.             ur.setMessage("完整文件已存在，直接跳过上传，实现秒传");
  142.             return ur;
  143.         }
  144.  
  145.         //如果完整文件不存在，则去数据库判断当前哪些文件块已经上传过了，把结果告诉前端，跳过这些文件块的上传，实现断点续传
  146.         ArrayList<Integer> list = sysChunkMapper.selectChunkNumbers(chunk);
  147.         if (CollectionUtils.isNotEmpty(list)) {
  148.             ur.setSkipUpload(false);
  149.             ur.setUploadedChunks(list);
  150.             ur.setMessage("部分文件块已存在，继续上传剩余文件块，实现断点续传");
  151.             return ur;
  152.         }
  153.         return ur;
  154.     }
  155.  
  156.     /**
  157.      * 生成上传后的文件路径
  158.      *
  159.      * @param uploadFolder 本地路径
  160.      * @param chunk        分片信息
  161.      * @return
  162.      */
  163.     public String generatePath(String uploadFolder, SysChunk chunk) {
  164.         StringBuilder sb = new StringBuilder();
  165.         sb.append(uploadFolder).append("/").append(chunk.getIdentifier());
  166.  
  167.         //把字符串拼接为Path
  168.         Path path = Paths.get(sb.toString());
  169.         //判断uploadFolder/identifier 路径是否存在，不存在则创建
  170.         if (!Files.isWritable(path)) {
  171.             logger.info("path not exist,create path: {}", sb.toString());
  172.             try {
  173.                 Files.createDirectories(path);
  174.             } catch (IOException e) {
  175.                 logger.error(e.getMessage(), e);
  176.             }
  177.         }
  178.  
  179.         return sb.append("/")
  180.                 .append(chunk.getFilename())
  181.                 .append("-")
  182.                 .append(chunk.getChunkNumber()).toString();
  183.     }
  184.  
  185.     /**
  186.      * 根据文件的全路径名判断文件是否存在
  187.      *
  188.      * @param file
  189.      * @return
  190.      */
  191.     public boolean fileExists(String file) {
  192.         Path path = Paths.get(file);
  193.         boolean fileExists = Files.exists(path, new LinkOption[]{LinkOption.NOFOLLOW_LINKS});
  194.         return fileExists;
  195.     }
  196.  
  197.     @Override
  198.     public String mergeFile(SysFileVO fileInfoVO) {
  199.         String rlt = VmConstants.FAIL;
  200.  
  201.         //前端组件参数转换为model对象
  202.         VersionPackage fileInfo = buildVersionPackage(fileInfoVO);
  203.  
  204.         LoginUser user = SecurityUtils.getLoginUser();
  205.         Date now = DateUtils.getNowDate();
  206.         fileInfo.setCreateBy(user.getUsername());
  207.         fileInfo.setCreateTime(now);
  208.         fileInfo.setUpdateBy(user.getUsername());
  209.         fileInfo.setUpdateTime(now);
  210.  
  211.         String filename = fileInfoVO.getName();
  212.         //进行文件的合并操作
  213.         String file = localFilePath + "/" + fileInfo.getIdentifier() + "/" + filename;
  214.         String folder = localFilePath + "/" + fileInfo.getIdentifier();
  215.         String fileSuccess = merge(file, folder, filename);
  216.  
  217.         fileInfo.setLocation(file);
  218.  
  219.         //文件合并成功后，保存记录至数据库
  220.         if (VmConstants.SUCCESS_CODE.equals(fileSuccess)) {
  221.             if (versionPackageMapper.insertVersionPackage(fileInfo) > 0) {
  222.                 rlt = VmConstants.SUCCESS;
  223.             }
  224.         }
  225.  
  226.         //如果已经存在，则判断是否同一个项目，同一个项目的不用新增记录，否则新增
  227.         if (VmConstants.EXIST_CODE.equals(fileSuccess)) {
  228.             List<VersionPackage> tfList = versionPackageMapper.selectVersionPackageList(fileInfo);
  229.             if (tfList != null) {
  230.                 if (tfList.size() == 0 || (tfList.size() > 0 && !fileInfo.getSuitScope().equals(tfList.get(0).getSuitScope()))) {
  231.                     if (versionPackageMapper.insertVersionPackage(fileInfo) > 0) {
  232.                         rlt = VmConstants.SUCCESS;
  233.                     }
  234.                 }
  235.             }
  236.         }
  237.         return rlt;
  238.     }
  239.  
  240.     /**
  241.      * 根据上传的文件构造版本包对象
  242.      * @param fileInfoVO
  243.      * @return
  244.      */
  245.     private VersionPackage buildVersionPackage(SysFileVO fileInfoVO) {
  246.         String filename = fileInfoVO.getName();
  247.         String id = SnowflakeIdWorker.getUUID();
  248.  
  249.         VersionPackage fileInfo = new VersionPackage();
  250.         fileInfo.setVersionId(id);
  251.         fileInfo.setGenerateDate(new Date());
  252.         fileInfo.setVersionPackage(filename);
  253.         fileInfo.setVersionType("1");
  254.         fileInfo.setVersionRadio("1");
  255.         //第一个下划线到最后一个点
  256.         int startIndex = filename.indexOf("_");
  257.         int endIndex = filename.lastIndexOf(".");
  258.         String versionNo = filename.substring(startIndex+1 , endIndex);
  259.         fileInfo.setVersionNo(versionNo);
  260.         fileInfo.setIdentifier(fileInfoVO.getUniqueIdentifier());
  261.         fileInfo.setTotalSize(fileInfoVO.getSize());
  262.         fileInfo.setSuitScope(fileInfoVO.getRefProjectId());
  263.         fileInfo.setStatus("0");
  264.         return fileInfo;
  265.     }
  266.  
  267.     /**
  268.      * 文件合并
  269.      *
  270.      * @param file
  271.      * @param folder
  272.      * @param filename
  273.      * @return
  274.      */
  275.     public String merge(String file, String folder, String filename) {
  276.         //默认合并成功
  277.         String rlt = VmConstants.SUCCESS_CODE;
  278.  
  279.         try {
  280.             //先判断文件是否存在
  281.             if (fileExists(file)) {
  282.                 //文件已存在
  283.                 return VmConstants.EXIST_CODE;
  284.             }
  285.  
  286.             //不存在的话，进行合并
  287.             Files.createFile(Paths.get(file));
  288.  
  289.             Files.list(Paths.get(folder))
  290.                     .filter(path -> !path.getFileName().toString().equals(filename))
  291.                     .sorted((o1, o2) -> {
  292.                         String p1 = o1.getFileName().toString();
  293.                         String p2 = o2.getFileName().toString();
  294.                         int i1 = p1.lastIndexOf("-");
  295.                         int i2 = p2.lastIndexOf("-");
  296.                         return Integer.valueOf(p2.substring(i2)).compareTo(Integer.valueOf(p1.substring(i1)));
  297.                     })
  298.                     .forEach(path -> {
  299.                         try {
  300.                             //以追加的形式写入文件
  301.                             Files.write(Paths.get(file), Files.readAllBytes(path), StandardOpenOption.APPEND);
  302.                             //合并后删除该块
  303.                             Files.delete(path);
  304.                         } catch (IOException e) {
  305.                             logger.error(e.getMessage(), e);
  306.                         }
  307.                     });
  308.         } catch (IOException e) {
  309.             logger.error(e.getMessage(), e);
  310.             //合并失败
  311.             rlt = VmConstants.FAIL_CODE;
  312.         }
  313.  
  314.         return rlt;
  315.     }
  316.  
  317. }

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

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

  

闽ICP备14008679号