利用SpringBoot和vue-simple-uploader进行文件的分片上传

效果【上传Zip文件为例,可以自行扩展】

引入vue-simple-uploader

  1. 安装上传插件
    npm install vue-simple-uploader --save
    
  2. main.js全局引入上传插件
    import uploader from 'vue-simple-uploader'
    Vue.use(uploader)
    
  3. 安装md5校验插件(保证上传文件的完整性和一致性)
    npm install spark-md5 --save
    

页面

<template>
  <div>
    <uploader :key="uploader_key" :options="options" class="uploader-example"
              :autoStart="false"
              @file-success="onFileSuccess"
              @file-added="filesAdded">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <uploader-btn :single="true" :attrs="attrs">选择Zip文件</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </div>
</template>

<script>
  import SparkMD5 from 'spark-md5';

  export default {
    data() {
      return {
        uploader_key: new Date().getTime(),
        options: {
          target: '/chunk/chunkUpload',
          testChunks: false,
        },
        attrs: {
          accept: '.zip'
        }
      }
    },
    methods: {
      onFileSuccess: function (rootFile, file, response, chunk) {
        console.log(JSON.parse(response).model);
      },
      computeMD5(file) {
        const loading = this.$loading({
          lock: true,
          text: '正在计算MD5',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let fileReader = new FileReader();
        let time = new Date().getTime();
        let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
        let currentChunk = 0;
        const chunkSize = 10 * 1024 * 1000;
        let chunks = Math.ceil(file.size / chunkSize);
        let spark = new SparkMD5.ArrayBuffer();
        file.pause();

        loadNext();

        fileReader.onload = (e => {
          spark.append(e.target.result);
          if (currentChunk < chunks) {
            currentChunk++;
            loadNext();
            this.$nextTick(() => {
              console.log('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
            })
          } else {
            let md5 = spark.end();
            loading.close();
            this.computeMD5Success(md5, file);
            console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
          }
        });
        fileReader.onerror = function () {
          this.error(`文件${file.name}读取出错,请检查该文件`);
          loading.close();
          file.cancel();
        };

        function loadNext() {
          let start = currentChunk * chunkSize;
          let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
          fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
        }
      },
      computeMD5Success(md5, file) {
        file.uniqueIdentifier = md5;//把md5值作为文件的识别码
        file.resume();//开始上传
      },
      filesAdded(file, event) {
        //大小判断
        const isLt100M = file.size / 1024 / 1024 < 10;
        if (!isLt100M) {
          this.$message.error(this.$t("error.error_upload_file_max"));
        } else {
          this.computeMD5(file)
        }
      }
    }
  }
</script>

<style>
  .uploader-example {
    width: 90%;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }

  .uploader-example .uploader-btn {
    margin-right: 4px;
  }

  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>

后台

  1. 引入工具

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.6</version>
    </dependency>
    
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
    
  2. 控制类

    import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    
    @RestController
    @RequestMapping("/chunk")
    public class ChunkController {
        @RequestMapping("/chunkUpload")
        public StdOut chunkUpload(MultipartFileParam param, HttpServletRequest request, HttpServletResponse response) {
            StdOut out = new StdOut();
    
            File file = new File("C:\\chunk_test");//存储路径
    
            ChunkService chunkService = new ChunkService();
    
            String path = file.getAbsolutePath();
            response.setContentType("text/html;charset=UTF-8");
    
            try {
                //判断前端Form表单格式是否支持文件上传
                boolean isMultipart = ServletFileUpload.isMultipartContent(request);
                if (!isMultipart) {
                    out.setCode(StdOut.PARAMETER_NULL);
                    out.setMessage("表单格式错误");
                    return out;
                } else {
                    param.setTaskId(param.getIdentifier());
                    out.setModel(chunkService.chunkUploadByMappedByteBuffer(param, path));
                    return out;
                }
            } catch (NotSameFileExpection e) {
                out.setCode(StdOut.FAIL);
                out.setMessage("MD5校验失败");
                return out;
            } catch (Exception e) {
                out.setCode(StdOut.FAIL);
                out.setMessage("上传失败");
                return out;
            }
        }
    }
    
  3. StdOut类(只是封装的返回类)

    public class StdOut {
        public static final int SUCCESS = 200;
        public static final int FAIL = 400;
        public static final int PARAMETER_NULL = 500;
        public static final int NO_LOGIN = 600;
        private int code = 200;
        private Object model = null;
        private String message = null;
    
        public StdOut() {
            this.setCode(200);
            this.setModel((Object)null);
        }
    
        public StdOut(int code) {
            this.setCode(code);
            this.setModel((Object)null);
        }
    
        public StdOut(List<Map<String, Object>> model) {
            this.setCode(200);
            this.setModel(model);
        }
    
        public StdOut(int code, List<Map<String, Object>> model) {
            this.setCode(code);
            this.setModel(model);
        }
    
        public int getCode() {
            return this.code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public String toString() {
            return JSON.toJSONString(this);
        }
    
        public Object getModel() {
            return this.model;
        }
    
        public void setModel(Object model) {
            this.model = model;
        }
    
        public String getMessage() {
            return this.message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    }
    
  4. MultipartFileParam类(文件信息类)

    import org.springframework.web.multipart.MultipartFile;
    
    public class MultipartFileParam {
        private String taskId;
        private int chunkNumber;
        private long chunkSize;
        private int totalChunks;
        private String identifier;
        private MultipartFile file;
    
        public String getTaskId() {
            return taskId;
        }
    
        public void setTaskId(String taskId) {
            this.taskId = taskId;
        }
    
        public int getChunkNumber() {
            return chunkNumber;
        }
    
        public void setChunkNumber(int chunkNumber) {
            this.chunkNumber = chunkNumber;
        }
    
        public long getChunkSize() {
            return chunkSize;
        }
    
        public void setChunkSize(long chunkSize) {
            this.chunkSize = chunkSize;
        }
    
        public int getTotalChunks() {
            return totalChunks;
        }
    
        public void setTotalChunks(int totalChunks) {
            this.totalChunks = totalChunks;
        }
    
        public String getIdentifier() {
            return identifier;
        }
    
        public void setIdentifier(String identifier) {
            this.identifier = identifier;
        }
    
        public MultipartFile getFile() {
            return file;
        }
    
        public void setFile(MultipartFile file) {
            this.file = file;
        }
    }
    
  5. ChunkService类

    import org.apache.commons.codec.digest.DigestUtils;
    import org.apache.commons.io.FileUtils;
    import org.apache.commons.lang.StringUtils;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.RandomAccessFile;
    import java.nio.ByteBuffer;
    import java.nio.channels.FileChannel;
    import java.util.UUID;
    
    public class ChunkService {
        public String chunkUploadByMappedByteBuffer(MultipartFileParam param, String filePath) throws IOException, NotSameFileExpection {
    
            if (param.getTaskId() == null || "".equals(param.getTaskId())) {
                param.setTaskId(UUID.randomUUID().toString());
            }
    
            String fileName = param.getFile().getOriginalFilename();
            String tempFileName = param.getTaskId() + fileName.substring(fileName.lastIndexOf(".")) + "_tmp";
            File fileDir = new File(filePath);
            if (!fileDir.exists()) {
                fileDir.mkdirs();
            }
            File tempFile = new File(filePath, tempFileName);
            //第一步 打开将要写入的文件
            RandomAccessFile raf = new RandomAccessFile(tempFile, "rw");
            //第二步 打开通道
            FileChannel fileChannel = raf.getChannel();
            //第三步 计算偏移量
            long position = (param.getChunkNumber() - 1) * param.getChunkSize();
            //第四步 获取分片数据
            byte[] fileData = param.getFile().getBytes();
            //第五步 写入数据
            fileChannel.position(position);
            fileChannel.write(ByteBuffer.wrap(fileData));
            fileChannel.force(true);
            fileChannel.close();
            raf.close();
            //判断是否完成文件的传输并进行校验与重命名
            boolean isComplete = checkUploadStatus(param, fileName, filePath);
            if (isComplete) {
                FileInputStream fileInputStream = new FileInputStream(tempFile.getPath());
                String md5 = DigestUtils.md5Hex(fileInputStream);
                fileInputStream.close();
                if (StringUtils.isNotBlank(md5) && !md5.equals(param.getIdentifier())) {
                    throw new NotSameFileExpection();
                }
                renameFile(tempFile, fileName);
                return fileName;
            }
            return null;
        }
    
        public void renameFile(File toBeRenamed, String toFileNewName) {
            if (!toBeRenamed.exists() || toBeRenamed.isDirectory()) {
                System.err.println("文件不存在");
                return;
            }
            String p = toBeRenamed.getParent();
            File newFile = new File(p + File.separatorChar + toFileNewName);
            toBeRenamed.renameTo(newFile);
        }
    
        public boolean checkUploadStatus(MultipartFileParam param, String fileName, String filePath) throws IOException {
            File confFile = new File(filePath, fileName + ".conf");
            RandomAccessFile confAccessFile = new RandomAccessFile(confFile, "rw");
            //设置文件长度
            confAccessFile.setLength(param.getTotalChunks());
            //设置起始偏移量
            confAccessFile.seek(param.getChunkNumber() - 1);
            //将指定的一个字节写入文件中 127,
            confAccessFile.write(Byte.MAX_VALUE);
            byte[] completeStatusList = FileUtils.readFileToByteArray(confFile);
            confAccessFile.close();//不关闭会造成无法占用
            //创建conf文件文件长度为总分片数,每上传一个分块即向conf文件中写入一个127,那么没上传的位置就是默认的0,已上传的就是127
            for (int i = 0; i < completeStatusList.length; i++) {
                if (completeStatusList[i] != Byte.MAX_VALUE) {
                    return false;
                }
            }
            confFile.delete();
            return true;
        }
    }
    

  6.NotSameFileExpection类

public class NotSameFileExpection extends Exception {
    public NotSameFileExpection() {
        super("File MD5 Different");
    }
}

遇到问题

  • 根据自己的实际情况进行取舍,灵活处理
Logo

前往低代码交流专区

更多推荐