900字范文 > 大文件分片并发上传断点续传秒传第二弹

大文件分片并发上传断点续传秒传第二弹

时间：2022-12-18 19:33:50

相关推荐

大文件分片并发上传断点续传秒传第二弹

继上次大文件分块上传原理见：/haohao123nana/article/details/51279098，博主终于有时间来真正的代码实现它。

关键部分

前端用file.slice()分块前端用FileReader获取每一分块的md5值前端上传每一分块前，都会去服务器校验分片是否已上传，以此来支持断点续传后端用MultipartFile接受分块文件后端用FileOutputStream拼装分块文件

一、话不多说，直接上代码，我想这是你们最喜欢的

html

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>HTML5大文件分片上传示例</title><script src="/jquery/1.12.4/jquery.min.js"></script><script src="md5.js"></script><script>vari = -1;var succeed = 0;var databgein; //开始时间var dataend; //结束时间var action=false; //false检验分片是否上传过(默认); true上传文件var page = {init: function(){$("#upload").click(function(){databgein=new Date();var file = $("#file")[0].files[0]; //文件对象isUpload(file);});} };$(function(){page.init();});function isUpload (file) {//构造一个表单，FormData是HTML5新增的var form = new FormData();var r = new FileReader();r.readAsBinaryString(file);$(r).load(function(e){var bolb = e.target.result;var md5 = hex_md5(bolb);form.append("md5", md5); //Ajax提交$.ajax({url: "http://localhost:8080//bookQr/test/isUpload",type: "POST",data: form,async: true, //异步processData: false, //很重要，告诉jquery不要对form进行处理contentType: false, //很重要，指定为false才能形成正确的Content-Typesuccess: function(data){var dataObj = eval("("+data+")");var uuid = dataObj.fileId;var date = dataObj.date;if (dataObj.flag == "1") {//没有上传过文件upload(file,uuid,md5,date);} else if(dataObj.flag == "2") {//已经上传部分upload(file,uuid,md5,date);} else if(dataObj.flag == "3") {//文件已经上传过alert("文件已经上传过,秒传了！！");$("#uuid").append(uuid);}},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("服务器出错!");}});})}/** file 文件对象* uuid 后端生成的uuid* filemd5 整个文件的md5* date 文件第一个分片上传的日期(如:0122)*/function upload (file,uuid,filemd5,date) {name = file.name; //文件名size = file.size; //总大小var shardSize = 5 * 1024 * 1024, //以5MB为一个分片shardCount = Math.ceil(size / shardSize); //总片数if (i > shardCount) {i = -1;i = shardCount;} else {if(!action){i += 1; //只有在检测分片时,i才去加1; 上传文件时无需加1}}//计算每一片的起始与结束位置var start = i * shardSize,end = Math.min(size, start + shardSize);//构造一个表单，FormData是HTML5新增的var form = new FormData();if(!action){form.append("action", "check"); //检测分片是否上传$("#param").append("action==check ");}else{form.append("action", "upload"); //直接上传分片form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分$("#param").append("action==upload ");}form.append("uuid", uuid);form.append("filemd5", filemd5);form.append("date", date);form.append("name", name);form.append("size", size);form.append("total", shardCount); //总片数form.append("index", i+1); //当前是第几片var ssindex = i+1;$("#param").append("index=="+ssindex+"<br/>");//按大小切割文件段var data = file.slice(start, end);var r = new FileReader();r.readAsBinaryString(data);$(r).load(function(e){var bolb = e.target.result;var md5 = hex_md5(bolb);form.append("md5", md5); //Ajax提交$.ajax({url: "http://localhost:8080//bookQr/test/upload",type: "POST",data: form,async: true, //异步processData: false, //很重要，告诉jquery不要对form进行处理contentType: false, //很重要，指定为false才能形成正确的Content-Typesuccess: function(data){var dataObj = eval("("+data+")");var fileuuid = dataObj.fileId;var flag = dataObj.flag;//服务器返回该分片是否上传过if(!action){if (flag == "1") {//未上传action = true;} else if(dataObj.flag == "2") {//已上传action = false;++succeed;}//递归调用 upload(file,uuid,filemd5,date);}else{//服务器返回分片是否上传成功//改变界面++succeed;$("#output").text(succeed + " / " + shardCount);if (i+1 == shardCount) {dataend=new Date();$("#uuid").append(fileuuid);$("#usetime").append(dataend.getTime()-databgein.getTime());} else {//已上传成功,然后检测下一个分片action = false;//递归调用 upload(file,uuid,filemd5,date);}}},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("服务器出错!");}});})}</script></head><body><input type="file" id="file" /><button id="upload">上传</button><span id="output" style="font-size:12px">等待</span><span id="usetime" style="font-size:12px;margin-left:20px;">用时</span><span id="uuid" style="font-size:12px;margin-left:20px;">uuid==</span><br/><br/><br/><br/><span id="param" style="font-size:12px;margin-left:20px;">param==</span></body></html>

controller

package com.yxtech.sys.controller;import mon.Constant;import com.yxtech.sys.domain.FileRes;import com.yxtech.sys.service.FileResService;import com.yxtech.sys.service.ResService;import com.yxtech.utils.file.FileMd5Util;import com.yxtech.utils.file.NameUtil;import com.yxtech.utils.file.PathUtil;import jodd.datetime.JDateTime;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Scope;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import tk.mybatis.mapper.entity.Example;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.*;/*** Created by Administrator on /10/9.*/@RestController@Scope("prototype")@RequestMapping(value = "/test")public class testController {@Autowiredprivate FileResService fileResService;@Autowiredprivate ResService resService;/*** 上传文件** @param request* @return* @throws IllegalStateException* @throws IOException*/@RequestMapping(value = "/upload")public Map<String, Object> upload(HttpServletRequest request, @RequestParam(value = "data",required = false) MultipartFile multipartFile) throws IllegalStateException, IOException, Exception {String action = request.getParameter("action");String uuid = request.getParameter("uuid");String fileName = request.getParameter("name");String size = request.getParameter("size");//总大小int total = Integer.valueOf(request.getParameter("total"));//总片数int index = Integer.valueOf(request.getParameter("index"));//当前是第几片String fileMd5 = request.getParameter("filemd5"); //整个文件的md5String date = request.getParameter("date"); //文件第一个分片上传的日期(如:0122)String md5 = request.getParameter("md5"); //分片的md5//生成上传文件的路径信息，按天生成String savePath = Constant.FILE_PATH + File.separator + date;String saveDirectory = PathUtil.getAppRootPath(request) + savePath + File.separator + uuid;//验证路径是否存在，不存在则创建目录File path = new File(saveDirectory);if (!path.exists()) {path.mkdirs();}//文件分片位置File file = new File(saveDirectory, uuid + "_" + index);//根据action不同执行不同操作. check:校验分片是否上传过; upload:直接上传分片Map<String, Object> map = null;if("check".equals(action)){String md5Str = FileMd5Util.getFileMD5(file);if (md5Str != null && md5Str.length() == 31) {System.out.println("check length =" + md5.length() + " md5Str length" + md5Str.length() + " " + md5 + " " + md5Str);md5Str = "0" + md5Str;}if (md5Str != null && md5Str.equals(md5)) {//分片已上传过map = new HashMap<>();map.put("flag", "2");map.put("fileId", uuid);map.put("status", true);return map;} else {//分片未上传map = new HashMap<>();map.put("flag", "1");map.put("fileId", uuid);map.put("status", true);return map;}}else if("upload".equals(action)){//分片上传过程中出错,有残余时需删除分块后,重新上传if (file.exists()) {file.delete();}multipartFile.transferTo(new File(saveDirectory, uuid + "_" + index));}if (path.isDirectory()) {File[] fileArray = path.listFiles();if (fileArray != null) {if (fileArray.length == total) {//分块全部上传完毕,合并String suffix = NameUtil.getExtensionName(fileName);File newFile = new File(PathUtil.getAppRootPath(request) + savePath, uuid + "." + suffix);FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加写入byte[] byt = new byte[10 * 1024 * 1024];int len;FileInputStream temp = null;//分片文件for (int i = 0; i < total; i++) {int j = i + 1;temp = new FileInputStream(new File(saveDirectory, uuid + "_" + j));while ((len = temp.read(byt)) != -1) {System.out.println("-----" + len);outputStream.write(byt, 0, len);}}//关闭流temp.close();outputStream.close();//修改FileRes记录为上传成功Example example = new Example(FileRes.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("md5",fileMd5);FileRes fileRes = new FileRes();fileRes.setStatus(Constant.ONE);fileResService.updateByExampleSelective(fileRes,example);}else if(index == 1){//文件第一个分片上传时记录到数据库FileRes fileRes = new FileRes();String name = NameUtil.getFileNameNoEx(fileName);if (name.length() > 50) {name = name.substring(0, 50);}fileRes.setName(name);fileRes.setSuffix(NameUtil.getExtensionName(fileName));fileRes.setUuid(uuid);fileRes.setPath(savePath + File.separator + uuid + "." + fileRes.getSuffix());fileRes.setSize(Integer.parseInt(size));fileRes.setMd5(fileMd5);fileRes.setStatus(Constant.ZERO);fileRes.setCreateTime(new Date());this.fileResService.insert(fileRes);}}}map = new HashMap<>();map.put("flag", "3");map.put("fileId", uuid);map.put("status", true);return map;}/*** 上传文件前校验** @param request* @return* @throws IOException*/@RequestMapping(value = "/isUpload")public Map<String, Object> isUpload(HttpServletRequest request) throws Exception {String md5 = request.getParameter("md5");Example example = new Example(FileRes.class);Example.Criteria criteria = example.createCriteria();criteria.andEqualTo("md5", md5);List<FileRes> list = fileResService.selectByExample(example);Map<String, Object> map = null;return map;}}

FileMd5Util

package com.yxtech.utils.file;import java.io.File;import java.io.FileInputStream;import java.math.BigInteger;import java.security.MessageDigest;/*** @author cuihao* @create -01-20-15:13*/public class FileMd5Util {public static final String KEY_MD5 = "MD5";public static final String CHARSET_ISO88591 = "ISO-8859-1";/*** Get MD5 of one file:hex string,test OK!** @param file* @return*/public static String getFileMD5(File file) {if (!file.exists() || !file.isFile()) {return null;}MessageDigest digest = null;FileInputStream in = null;byte buffer[] = new byte[1024];int len;try {digest = MessageDigest.getInstance("MD5");in = new FileInputStream(file);while ((len = in.read(buffer, 0, 1024)) != -1) {digest.update(buffer, 0, len);}in.close();} catch (Exception e) {e.printStackTrace();return null;}BigInteger bigInt = new BigInteger(1, digest.digest());return bigInt.toString(16);}/**** Get MD5 of one file！test ok!** @param filepath* @return*/public static String getFileMD5(String filepath) {File file = new File(filepath);return getFileMD5(file);}/*** MD5 encrypt,test ok** @param data* @return byte[]* @throws Exception*/public static byte[] encryptMD5(byte[] data) throws Exception {MessageDigest md5 = MessageDigest.getInstance(KEY_MD5);md5.update(data);return md5.digest();}public static byte[] encryptMD5(String data) throws Exception {return encryptMD5(data.getBytes(CHARSET_ISO88591));}/**** compare two file by Md5** @param file1* @param file2* @return*/public static boolean isSameMd5(File file1,File file2){String md5_1= FileMd5Util.getFileMD5(file1);String md5_2= FileMd5Util.getFileMD5(file2);return md5_1.equals(md5_2);}/**** compare two file by Md5** @param filepath1* @param filepath2* @return*/public static boolean isSameMd5(String filepath1,String filepath2){File file1=new File(filepath1);File file2=new File(filepath2);return isSameMd5(file1, file2);}public static void main(String[] args) {// for(int i=1;i<79;i++){// File file = new File("F:\\bookQr_SYS\\target\\bookQr\\files\\0122\\2124b3f9-a4c8-4297-a182-6249010dcd72\\2124b3f9-a4c8-4297-a182-6249010dcd72_"+i);File file = new File("F:\\bookQr_SYS\\target\\bookQr\\files\\0122\\2124b3f9-a4c8-4297-a182-6249010dcd72.mp4");String md5Str = getFileMD5(file);System.out.println(""+md5Str.length()+" "+md5Str);// }}}

NameUtil

/*** Created by Administrator on /10/12.*/public class NameUtil {/*** Java文件操作获取文件扩展名*/public static String getExtensionName(String filename) {if ((filename != null) && (filename.length() > 0)) {int dot = filename.lastIndexOf('.');if ((dot > -1) && (dot < (filename.length() - 1))) {return filename.substring(dot + 1);}}return filename.toLowerCase();}/*** Java文件操作获取不带扩展名的文件名*/public static String getFileNameNoEx(String filename) {if ((filename != null) && (filename.length() > 0)) {int dot = filename.lastIndexOf('.');if ((dot > -1) && (dot < (filename.length()))) {return filename.substring(0, dot);}}return filename.toLowerCase();}public static void main(String[] args) {String str = "AAAbb.jpg";System.out.println(getExtensionName(str).toLowerCase());System.out.println(getFileNameNoEx(str).toUpperCase());}}

PathUtil

import com.yxtech.sys.controller.MailController;import javax.servlet.http.HttpServletRequest;import java.io.IOException;import java.io.InputStream;import java.util.Properties;/*** Created by Administrator on /10/12.*/public class PathUtil {/**** @param request* @return 返回结果类似于 “F:\workSpace\bookQr\src\main\webapp\”*/public static String getAppRootPath(HttpServletRequest request){//ServletActionContext.getServletContext().getRealPath("/")+"upload";return request.getSession().getServletContext().getRealPath("/");}/***自定义文件保存路径* @param request*/public static String getCustomRootPath(HttpServletRequest request){String path = "";Properties prop = new Properties();InputStream in = MailController.class.getResourceAsStream("/config/jdbc.properties");try {prop.load(in);path = prop.getProperty("FILE_PATH").trim();} catch (IOException e) {e.printStackTrace();}return path;}/**** @param request* @return :8080/projectName*/public static String getHttpURL(HttpServletRequest request) {StringBuffer buff = new StringBuffer();buff.append("http://");buff.append(request.getServerName());buff.append(":");buff.append(request.getServerPort());buff.append(request.getContextPath());return buff.toString();}}