springmvc 分片上传+进度条

女爷i 2022-12-27 08:27 156阅读 0赞

要实现分片上传+进度条，总体思路如下：

前端处理：

由前端js负责将要上传的文件分片，且定义分片总数，当前分片，每分片大小等参数，然后循环调用后端接口（每上传一次分片，调用一次后端接口，也就是while循环，条件是当前处理的分片小于等于最大分片数）。

后端接口：

接收到前端传来的每一个分片文件（springmvc下可以用MultipartFile接收文件），以及接收前端传来的分片参数，利用RandomAccessFile来将每一次传来的分片数据写入文件。

具体实现：

前端可以自定根据以上逻辑写js代码，也可以采用一些前端js插件，比如Vue\_simple\_uploader插件就支持前端分片，采用此插件后，后端的接口的分片参数也要和Vue\_simple\_uploader中的分片参数一致。

后端代码可以参考如下：

注意：以下代码中用来接收前端的参数没有和Vue\_simple\_uploader中一致，我是在controller中将Vue\_simple\_uploader中的参数接收后又赋值到了以下代码中的FileParam中。没有直接和Vue\_simple\_uploader参数一致的原因是，该功能是修改之前的功能而来，FileParam属于历史类，修改后影响范围较大。

/**
    	 * 上传保存文件
    	 * 
    	 * @param files      文件
    	 * @param fileParam  文件的参数
    	 * @param fileHelper 文件操作辅助类
    	 * @param isSubDir   是否按日期分子目录
    	 * @param isPrefix   文件名是否加前缀
    	 * @return
    	 * @throws Exception
    	 */
    	public String upload(MultipartFile[] files, FileParam fileParam, FileHelper fileHelper, boolean isSubDir,
    			boolean isPrefix) throws Exception {
    
    		FileParam param = fileParam;
    		try {
    
    			Integer length = param.getChunks();
    			Long chunkSize = param.getChunkSize();
    			String fileName = param.getFileName();
    			String fileChunkName = files[0].getOriginalFilename();// 本片文件名
    			if (StringUtils.isEmpty(fileName)) {
    				// 如果客户端没有传递文件名，则从file对象中取，但此文件名较为不标准
    				fileName = fileChunkName;
    			}
    
    			// 分片
    			if (length != null && length > 1) {
    
    				String tempPath = fileHelper.getTempDir();// 临时文件夹
    				String tempFileName = param.getFileGUID();// 临时文件名称
    				File confFile = new File(tempPath, tempFileName + ".boxovi");// 临时文件的配置文件，记录是否上传完毕
    				File tmpDir = new File(tempPath);
    				File tmpFile = new File(tempPath, tempFileName);
    				if (!tmpDir.exists()) {
    					tmpDir.mkdirs();
    				}
    
    				// 合并临时文件
    				long pos = chunkSize * (param.getChunk() - 1);
    				boolean mergeTmp = mergeFile(tmpFile, 0, pos, files[0].getInputStream());
    				if (!mergeTmp)
    					throw new Exception("合并临时文件出错");
    
    				// 合并配置文件
    				pos = param.getChunk() - 1;
    
    				boolean mergeConf = mergeFile(confFile, length, pos,
    						new ByteArrayInputStream(new byte[] { Byte.MAX_VALUE }));
    				if (!mergeConf)
    					throw new Exception("合并配置文件出错");
    
    				// 检查是否全部完成
    				byte[] completeList = FileUtils.readFileToByteArray(confFile);
    				byte isComplete = Byte.MAX_VALUE;
    				for (int i = 1; i < completeList.length && isComplete == Byte.MAX_VALUE; i++) {
    					// 与运算, 如果有部分没有完成则 isComplete 不是 Byte.MAX_VALUE
    					isComplete = (byte) (isComplete & completeList[i]);
    				}
    
    				// 文件上传完毕
    				if (isComplete == Byte.MAX_VALUE) {
    					UploadFileEntity uploadFileEntity = fileHelper.createFile(fileName, isSubDir, isPrefix);// 保存正式文件
    					// 将临时文件重新命名为正式文件
    					if (tmpFile.renameTo(uploadFileEntity.getFile())) {
    						// 删除临时文件及配置文件
    						tmpFile.delete();
    						confFile.delete();
    					}
    
    					log.debug("上传文件：" + fileChunkName + "，" + uploadFileEntity.getFileId());
    					//return fileChunkName + FILE_SEPARATOR + uploadFileEntity.getFileId();
    					return uploadFileEntity.getFileId();
    				} else {
    					log.debug("上传文件：" + fileChunkName);
    					return fileChunkName;
    				}
    			} else {
    				// 支持多文件一起上传
    				StringBuffer sb = new StringBuffer();
    
    				if (files != null && files.length > 0) {
    					if (files.length == 1 && !files[0].isEmpty()) { // 上传文件只有1个，则以param.getFileName()作为文件名
    						UploadFileEntity mp = fileHelper.createFile(fileName/*param.getFileName()*/, isSubDir, isPrefix);
    						String fileId = mp.getFileId();// 文件保存后的唯一标识,可以将此标识与业务数据存储到数据库，下载的时候传入此标识即可下载
    						files[0].transferTo(mp.getFile());
    						sb.append(fileId + FILE_SEPARATOR);
    						log.debug("上传文件：" + fileId);
    					} else {
    						for (int i = 0; i < files.length; i++) {
    							MultipartFile file = files[i];
    							if (file.isEmpty())
    								continue;
    							UploadFileEntity mp = fileHelper.createFile(file.getOriginalFilename(), isSubDir, isPrefix);
    							String fileId = mp.getFileId();// 文件保存后的唯一标识,可以将此标识与业务数据存储到数据库，下载的时候传入此标识即可下载
    							file.transferTo(mp.getFile());
    							sb.append(fileId + FILE_SEPARATOR);
    
    							log.debug("上传文件：" + fileId);
    						}
    					}
    
    				}
    
    				return StringUtils.substringBeforeLast(sb.toString(), FILE_SEPARATOR);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    			log.error("文件上传失败，" + e);
    			return null;
    		} finally {
    			param = null;
    		}
    	}
    
    	/**
    	 * 合并文件
    	 * 
    	 * @param sName
    	 * @param splitternum
    	 * @throws Exception
    	 */
    	private boolean mergeFile(File file, long length, long pos, InputStream inputStream) throws Exception {
    
    		RandomAccessFile accessFile = null;
    		InputStream in = inputStream;
    		BufferedInputStream bfin = null;
    		try {
    			bfin = new BufferedInputStream(in);
    
    			accessFile = new RandomAccessFile(file, "rw");
    			// 文件长度
    			if (length > 0)
    				accessFile.setLength(length);
    			// 定位到该分片的偏移量
    			accessFile.seek(pos);
    			// 写入该分片数据
    			byte[] buffer = new byte[BUFFER_SIZE];
    			for (;;) {
    				int res = bfin.read(buffer);
    				if (res == -1) {
    					break;
    				}
    				if (res > 0) {
    					accessFile.write(buffer, 0, res);
    				}
    			}
    
    			return true;
    
    		} catch (Exception e) {
    			e.printStackTrace();
    			throw new Exception(e);
    		} finally {
    			if (accessFile != null) {
    				try {
    					accessFile.close();
    					accessFile = null;
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    
    			if (in != null) {
    				try {
    					in.close();
    					in = null;
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    
    			if (bfin != null) {
    				try {
    					bfin.close();
    					bfin = null;
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    		}
    	}

接收前端插件参数的vo如下：

/**   
    * <p><b>Description:</b> 适配前端Vue_simple_uploader参数</p>  
    * @author wangzhj 
    * @date 2020年12月8日  
    */
    public class VueSimpleUploaderFileParam {
        private int chunkNumber;
        private long chunkSize;
        private int totalChunks;
        private String identifier;
        private String clientId;
        private String fileName;
        private long totalSize;
        
        
        
        
        /**
         * @return the fileName
         */
        public String getFileName() {
            return fileName;
        }
        /**
         * @param fileName the fileName to set
         */
        public void setFileName(String fileName) {
            this.fileName = fileName;
        }
        /**
         * @return the totalSize
         */
        public long getTotalSize() {
            return totalSize;
        }
        /**
         * @param totalSize the totalSize to set
         */
        public void setTotalSize(long totalSize) {
            this.totalSize = totalSize;
        }
        /**
         * @return the chunkNumber
         */
        public int getChunkNumber() {
            return chunkNumber;
        }
        /**
         * @param chunkNumber the chunkNumber to set
         */
        public void setChunkNumber(int chunkNumber) {
            this.chunkNumber = chunkNumber;
        }
        /**
         * @return the chunkSize
         */
        public long getChunkSize() {
            return chunkSize;
        }
        /**
         * @param chunkSize the chunkSize to set
         */
        public void setChunkSize(long chunkSize) {
            this.chunkSize = chunkSize;
        }
        /**
         * @return the totalChunks
         */
        public int getTotalChunks() {
            return totalChunks;
        }
        /**
         * @param totalChunks the totalChunks to set
         */
        public void setTotalChunks(int totalChunks) {
            this.totalChunks = totalChunks;
        }
        /**
         * @return the identifier
         */
        public String getIdentifier() {
            return identifier;
        }
        /**
         * @param identifier the identifier to set
         */
        public void setIdentifier(String identifier) {
            this.identifier = identifier;
        }
        /**
         * @return the clientId
         */
        public String getClientId() {
            return clientId;
        }
        /**
         * @param clientId the clientId to set
         */
        public void setClientId(String clientId) {
            this.clientId = clientId;
        }
    
        
        
    }

参考文章:

[https://blog.csdn.net/u012386080/article/details/107174352][https_blog.csdn.net_u012386080_article_details_107174352]

[https://www.cnblogs.com/caifenglin/p/7830908.html][https_www.cnblogs.com_caifenglin_p_7830908.html]

[https_blog.csdn.net_u012386080_article_details_107174352]: https://blog.csdn.net/u012386080/article/details/107174352
[https_www.cnblogs.com_caifenglin_p_7830908.html]: https://www.cnblogs.com/caifenglin/p/7830908.html