• elementUI大文件分片上传

    前端实现

    使用vue+elementui进行前端开发, 实现在dialog中 带进度条的上传大文件页面

    1. <el-form :model="ruleForm" ref="ruleForm" :label-width="formLabelWidth" :rules="theRules" >
    2.     <el-form-item prop="jar" :label-width="formLabelWidth">
    3.         <label slot="lable" style="font-weight: lighter">上传文件</label>
    4.         <el-upload
    5.             ref="upload"
    6.             action=""
    7.             :http-request="handleFile"
    8.             :on-preview="handlePreview"
    9.             :on-remove="handleRemove"
    10.             :before-remove="beforeRemove"
    11.             :on-change="handleChange"
    12.             :multiple="false"
    13.             :limit="1"
    14.             :file-list="fileList"
    15.             accept=".tar">
    16.             <el-button slot="trigger" size="small" type="primary" :disabled="fileButtonDisabled">选择应用包</el-button>
    17.             <el-button style="margin-left: 10px" size="small" type="success" @click="uploadFile" :disabled="fileButtonDisabled">上传</el-button>
    18.         </el-upload>
    19.     </el-form-item>
    20.  
    21.     <el-form-item>
    22.         <label slot="lable" style="font-weight: lighter"></label>
    23.         <el-progress :text-inside="true" :stroke-width="15" :percentage="filePercentage"></el-progress>
    24.     </el-form-item>
    25. </el-form>
    26.  
    27. <div slot="footer" class="dialog-footer">
    28.     <el-button @click="handleClose('ruleForm')">取 消</el-button>
    29.     <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    30. </div>

    复制

    这里使用axios有一个坑需要注意一下，必须是这个指定的header,且必须用Promise包起来。

    1.     data: function () {
    2.         return {
    3.             ruileForms: {
    4.                 file: '',
    5.                 jar: ''
    6.             }
    7.             theRules: {
    8.                 //jar:[{required:true, message:"请上传tar包", trigger:'blur'}]
    9.             }
    10.             fileList:[],
    11.             filePercentage: 0, // 文件上传进度条
    12.             fileLocation: '', // 文件在后台方式的位置
    13.             fileCancelUpload: false, // 取消文件分片上传
    14.             fileButtonDisabled: false, //文件上传按钮禁用
    15.         }
    16.     }
    17.     methods: {
    18.         submitForm(formName) {
    19.             this.$refs[formName].validate((valid) => {
    20.               if (valid) {
    21.                   if (this.fileLocation == "") {
    22.                       this.$message({message:"请上传文件", type:'fail'})
    23.                   }
    24.  
    25.                   let formData = new FormData()
    26.                   formData.append("fileLocation", this.fileLocation)
    27.  
    28.                   // 设置header头
    29.                   let config = {
    30.                       headers: {
    31.                           'Content-Type':'multipart/form-data',
    32.                       }
    33.                   }
    34.  
    35.                   Axios.post('/api/fileUpload', formData, config)
    36.                     .then((response) => {
    37.                         if (response.data.result == true) {
    38.                             this.$message({message:"成功", type:'success'})
    39.                             this.resetForm('ruleForm')
    40.  
    41.                         }
    42.                     })
    43.                     .catch((err) => {
    44.                         console.log(err)
    45.                     })
    46.  
    47.               }
    48.  
    49.             })
    50.         },
    51.  
    52.         handleFile() {
    53.           // 空方法
    54.         },
    55.         handleChange(file, fileList) {
    56.             // 文件改变时
    57.             this.fileList = fileList
    58.         },
    59.         handleRemove(file, fileList) {
    60.             this.fileCancelUpload = true
    61.             this.filePercentage = 0 //进度条置空
    62.             this.fileList = []
    63.             this.fileButtonDisabled = false // 上传可点击
    64.         },
    65.         beforeRemove(file, fileList) {
    66.             return this.$confirm('确定移除 ${file.name} ?');
    67.         },
    68.  
    69.         //上传文件
    70.         uploadFile() {
    71.             let file = this.fileList[0] ? this.fileList[0].raw : ""
    72.             if (file == "") {//判断文件是否存在
    73.                  this.$message({message:"未选择文件", type:'fail'})
    74.                 return;
    75.             }
    76.  
    77.              if (file.size > 50 * 1024 * 1024) {
    78.                  //判断文件大小
    79.                  this.$message({message:"文件不能大于50M", type:'fail'})
    80.                 return;
    81.             }
    82.  
    83.             //判断文件类型
    84.             if (file.type.indexOf("tar") == "-1") { //application/x-tar
    85.                 //判断文件大小
    86.                 this.$message({message:"文件必须为tar包", type:'fail'})
    87.                 return;
    88.             }
    89.  
    90.             if (file.name.length > 30) {
    91.                 //判断文件大小
    92.                 this.$message({message:"文件名大于30个字符", type:'fail'})
    93.                 return;
    94.             }
    95.  
    96.             this.fileButtonDisabled = true
    97.             // 唯一标识
    98.             var uiqueIdentifier = this.Id + '-' + parseInt(new Data().getTime() / 1000)
    99.             console.log(uiqueIdentifier)
    100.             this.uploadBySplit(file, uiqueIdentifier, 0)
    101.  
    102.         },
    103.         //分片上传
    104.         uploadBySplit(file, identifier, i) {
    105.  
    106.             //如果取消上传直接初始化为最初状态
    107.             if (this.fileCancelUpload) {
    108.                 this.fileCancelUpload = false
    109.                 this.filePercentage = 0
    110.                 this.fileList = []
    111.                 this.fileButtonDisabled = false
    112.             }
    113.  
    114.             var chunkSize = 1024 * 1024 * 1; //分片大小1M
    115.             var size = file.size; //总大小
    116.             var totalChunks = Math.ceil(size/chunkSize);
    117.  
    118.             //分片停止条件
    119.             if (i == totalChunks) {
    120.                 this.$message({message:"上传成功", type:'success'})
    121.                 return;
    122.             }
    123.  
    124.             //计算每一篇的起始位置和结束位置
    125.             var start = i * chunkSize;
    126.             var  end = Math.min(size, start + chunkSize);
    127.             var fileData= file.slice(start, end)
    128.  
    129.             //文件分块上传
    130.             var reader = new FileReader();
    131.             reader.readAsBinaryString(fileData);
    132.             reader.onload = function(e) {
    133.                 let formData = new FormData();
    134.                 formData.append('chunkNumber', i+1); //当前第几片，从0开始，文件下表从1计算。
    135.                 formData.append('chunkSize', chunkSize); //当前分片大小
    136.                 formData.append('currentChunkSize', fileData.size); //当前块大小
    137.                 formData.append('totalSize', size) //总的大小
    138.                 formData.append('identifier', identifier) //唯一标识
    139.                 formData.append('filename', file.name) //文件名
    140.                 formData.append('type', file.type) //文件类型
    141.                 // formData.append('relativePath', "/") //相对路径，暂时没用
    142.                 formData.append('totalChunks', totalChunks) //总片数
    143.                 formData.append('file', fileData) //总片数
    144.  
    145.                 // 必须用这个Promise包起来axios,不然有问题
    146.                 return new Promise((resolve, reject) => {
    147.  
    148.                     // 必须用这个类型的头，并且要包括boundary
    149.                     let config = {
    150.                         headers: {
    151.                             'Content-Type':'multipart/form-data； charset=utf-8; boundary="another cool boundary";',
    152.                         }
    153.                     }
    154.  
    155.                     Axios.post('/api/upload', formData, config)
    156.                         .then((response) => {
    157.                             if (response.data.result == true) {
    158.                                 if (response.data.data != "") {
    159.                                     this.fileLocation=response.data.data//合并后文件放置的位置
    160.                                 }
    161.  
    162.                                 //上传进度
    163.                                 var process =Math.random(end/ size*1000);
    164.                                 this.fileLocation = process
    165.                                 i++;
    166.                                 this.uploadBySplit(file, identifier, i);
    167.                                 resolve(response.data)
    168.                             }else {
    169.                                 this.$message({message:"分片上传失败", type:'fail'})
    170.                                 reject(err)
    171.                             }
    172.                         })
    173.                         .catch((err) => {
    174.                             console.log(err)
    175.                         })
    176.  
    177.                 })
    178.             }
    179.         }
    180.  
    181.  
    182.  
    183.     }

    后端实现 java版

    1.     @ResponseBody
    2.     @RequestMapping(value="/upload", method = RequestMethod.Post)
    3.     public JsonResult upload(HttpServletRequest request, Chunk chunk) {
    4.         try {
    5.             
    6.             boolen isMutipart = ServletFileUpload.isMutipartContent(request);
    7.             if(isMutipart) {
    8.                 MultipartFile file = chunk.getFile();
    9.                 
    10.                 if(file == null) {
    11.                     return JsonResult.failure("文件为空");
    12.                 }
    13.                 
    14.                 File outFile = new File(generatePath(chunk));
    15.                 InputStream inputStream = file.getInputStream();
    16.                 FileUtils.copyInputStreamToFile(inputStream, outFile);
    17.                 
    18.                 //判断所有分片是否全部上传完成，完成就合并
    19.                 File dir = new File(generateFileDir(chunk));
    20.                 File[] files = dir.listFiles();
    21.                 if (files.length == chunk.getTotalChunks()) {
    22.                     String filePath = mergeFile(chunk); //合并文件
    23.                     return JsonResult.success(filePath);
    24.                 }
    25.                 
    26.             }
    27.             
    28.             
    29.             return JsonResult.success();
    30.         } catch (Exception e) {
    31.             log.error(e)
    32.             return JsonResult.failure("系统错误");
    33.         }
    34.     }
    35.     
    36.     // 获取上传文件路径
    37.     public String generatePath(Chunk chunk) {
    38.         StringBuilder sb = new StringBuilder();
    39.         sb.append(uploadDir).append("/").append(chunk.getIdentifier());
    40.         if (!Files.isWritable(Paths.get(sb.toString()))) {
    41.             log.info("path not exist, create path:" , sb.toString());
    42.         }
    43.         try {
    44.             Files.createDiretories(Paths.get(sb.toString()));
    45.         } catch (IOExeception e){
    46.             log.error(e)
    47.         }
    48.         
    49.         return sb.append("/").append(chunk.getFilename()).append("-").append(chunk.getChunkNumber().toString());
    50.     }
    51.     
    52.     //获取切片路径
    53.     public String getnerateFileDir(Chunk chunk) {
    54.          StringBuilder sb = new StringBuilder();
    55.          sb.append(uploadDir).append("/")/append(chunk.getIdentifier());
    56.          return sb.toString();
    57.     }
    58.     
    59.     //合并文件
    60.     public String mergeFile(Chunk chunk) {
    61.         String filename = chunk.getFilename(); //文件名
    62.         String folder = generateFileDir(chunk); //文件路径
    63.         String file = folder + File.separator + filename; //生成文件名
    64.         merge(file, folder, filename); //合并
    65.         return chunk.getIdentifier() + + File.separator + filename; //返回相对路径
    66.     }
    67.     
    68.     //合并
    69.     public static void merge(String targetFile, String folder) {
    70.         try {
    71.             Files.createFile(Paths.get(targetFile));
    72.             Files.list(Paths.get(folder))
    73.                     .filter(path -> path.getFileName().toString().contains("-"))
    74.                     .sorted((o1, o2) -> {
    75.                         String p1 = o1.getFileName().toString();
    76.                         String p2 = o2.getFileName().toString();
    77.                         int i1 = p1.lastIndexOf("-");
    78.                         int i2 = p2.lastIndexOf("-");
    79.                         return Integer.valueOf(p2.substring(i2)).compareTo(Integer.valueOf(p1.substring(i1)));
    80.                     })
    81.                     .forEach(path -> {
    82.                         try {
    83.                             //以追加的形式写入文件
    84.                             Files.write(Paths.get(targetFile), Files.readAllBytes(path), StandardOpenOption.APPEND);
    85.                             //合并后删除该块
    86.                             Files.delete(path);
    87.                         } catch (IOException e) {
    88.                             e.printStackTrace();
    89.                         }
    90.                     });
    91.         } catch (IOException e) {
    92.             e.printStackTrace();
    93.         }
    94.     }

    复制

    chunk 块结构

    1. @Data
    2. @Entity
    3. public class Chunk implements Serializable {
    4.     @Id
    5.     @GeneratedValue
    6.     private Long id;
    7.     /**
    8.      * 当前文件块，从1开始
    9.      */
    10.     @Column(nullable = false)
    11.     private Integer chunkNumber;
    12.     /**
    13.      * 分块大小
    14.      */
    15.     @Column(nullable = false)
    16.     private Long chunkSize;
    17.     /**
    18.      * 当前分块大小
    19.      */
    20.     @Column(nullable = false)
    21.     private Long currentChunkSize;
    22.     /**
    23.      * 总大小
    24.      */
    25.     @Column(nullable = false)
    26.     private Long totalSize;
    27.     /**
    28.      * 文件标识
    29.      */
    30.     @Column(nullable = false)
    31.     private String identifier;
    32.     /**
    33.      * 文件名
    34.      */
    35.     @Column(nullable = false)
    36.     private String filename;
    37.     /**
    38.      * 相对路径
    39.      */
    40.     @Column(nullable = false)
    41.     private String relativePath;
    42.     /**
    43.      * 总块数
    44.      */
    45.     @Column(nullable = false)
    46.     private Integer totalChunks;
    47.     /**
    48.      * 文件类型
    49.      */
    50.     @Column
    51.     private String type;
    52.     @Transient
    53.     private MultipartFile file;
    54. }
  • 相关阅读:
    nodejs--开发自己的项目——2.1——注册用户信息
    图像处理： 马赛克艺术
    vue3 自定义组件 v-model 原理解析
    netty系列之:netty中的核心MessageToMessage编码器
    如何动态的测试Thrift服务
    使用await解决异步问题的注意点总结
    服务器搭建(TCP套接字)-epoll版(服务端)
    纯 CSS 实现 超长内容滚动播放。
    如何使用 Nginx 创建临时和永久重定向
    PyCharm安装教程
  • 原文地址：https://blog.csdn.net/lxw1005192401/article/details/128201698