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

蔚落 2023-06-17 10:54 7阅读 0赞

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

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

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70][]**

### **引入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");
        }
    }

### **遇到问题** ###

*  根据自己的实际情况进行取舍，灵活处理

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128172301180.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VpZWllaTQzOA==,size_16,color_FFFFFF,t_70