前言
最近项目中有使用到文件断点上传，得空便总结总结，顺便记录一下，毕竟“好记性不如烂笔头”。
后端代码：
package com.test.controller;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.util.UUID;import org.apache.commons.io.FileUtils;import org.apache.commons.io.FilenameUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controllerpublic class UploadController {@ResponseBody // 返回rest json@RequestMapping(value = {"/rest/saveUploadFileAsChunk"}, method = RequestMethod.POST, produces = "application/json")public File saveUploadFileAsChunk(@RequestParam(required = false) MultipartFile file,@RequestParam(required = true) Integer chunk, // 分割块数@RequestParam(required = true) Integer chunks, // 总分割数@RequestParam(required = true) String tempFileName //临时文件名 必须带后缀名) throws Exception{if(null != file){// 保存临时文件String chunkName = tempFileName; if (chunk != null) { chunkName = chunk + "_" + tempFileName; }File savedFile = new File("普通存放文件的路径", chunkName);if (!savedFile.getParentFile().exists())savedFile.getParentFile().mkdirs();file.transferTo(savedFile); //将MultipartFile转存到file对象}//如果到最后一个分割块，则做合并处理if (chunk != null && chunk + 1 == chunks) {String newFileName = UUID.randomUUID().toString().replace("-", "").concat(".").concat(FilenameUtils.getExtension(tempFileName));BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(new File("普通存放文件的路径", newFileName)));// 遍历文件合并 chunks，循环将文件写入新的文件中，并且删除之前的临时文件 for (int i = 0; i < chunks; i++) { File tempFile = new File("普通存放文件的路径", i + "_" + tempFileName); byte[] bytes = FileUtils.readFileToByteArray(tempFile); //将file对象解析城byte数组 outputStream.write(bytes); outputStream.flush(); tempFile.delete(); } outputStream.flush(); outputStream.close(); File reallyFile = new File("普通存放文件的路径", newFileName); //reallyFile即最后合并的文件 return reallyFile;}return null;}}
前端代码：
var setsize = 10 * 1024; //1024字节 = 1KB * 10 即每次10k/***参数filepath就是本地文件路径，主要就是用于放在localStorage中确定唯一性file ： js的Blob对象*/function uplaod(filepath,file){var filesize = file.size;var filecount = filesize/setsize; //计算出可以分成几块var i = localStorage.getItem(filepath);i = (i!=null && i!="")?parseInt(i):0;if(i < filecount){//新建一个FormData对象var formData = new FormData(); //++++++++++var blobfile;if((filesize - i * setsize) > setsize){ blobfile = file.slice(i*setsize,(i+1)*setsize);}else{ //代表是最后一此了 blobfile = file.slice(i*setsize,filesize);}formData.append('chunk', i); //++++++++++当前文件块formData.append('chunks', Math.ceil(filecount)); //++++++++++ 总块数formData.append("tempFileName",fileName); //临时文件名 带uuid的formData.append('file', blobfile);if(i < filecount){$.ajax({ url: PATROL_CONSTANTS.SRV_URL+"/rest/saveUploadFileAsChunk", type: 'POST', data: formData, processData: false, contentType: false, success: function (responseStr) { localStorage.setItem(filepath,i+1); var rs = filecount <= 0 ? "0%" : (Math.round((i+1) / Math.ceil(filecount) * 10000) / 100.00 + "%"); console.log("进度百分比："+rs); uploadFile(filepath,file); //递归调用 }, error: function (responseStr) { console.log("上传失败,重复尝试!"); console.log(responseStr); uploadFile(filepath,file); }});}else{//上传完成后,则将对应的localStorage移除掉 localStorage.removeItem(filepath);}}
转发请标注原文地址：http://www.cnblogs.com/dinglinjie/p/7458901.html
阿杰de博客，qq群：112465270
你要以乐观的态度看待这个世界，你会发现世界是如此得美好
