大文件分片上传

最新推荐文章于 2024-07-06 10:57:07 发布

program_z

最新推荐文章于 2024-07-06 10:57:07 发布

阅读量273

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/program_z/article/details/115227451

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了使用HTML5的File API实现大文件分片上传，并通过前端与后端交互校验分片状态，支持断点续传。详细讲解了前端如何读取文件分片并计算MD5，以及后端如何接收和拼装分片文件，最终在服务端完成文件合并。同时展示了相关代码和实际效果。

摘要由CSDN通过智能技术生成

关键部分

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

一、代码部分

html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>HTML5大文件分片上传示例</title>
  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="md5.js"></script>
  <script>
    var i = -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://192.168.1.118:8899/fileUpload/isUpload",
          type: "POST",
          data: form,
          async: true,        //异步
          processData: false,  //很重要，告诉jquery不要对form进行处理
          contentType: false,  //很重要，指定为false才能形成正确的Content-Type
          headers: { 'x-auth-token': '00000000000000000' },
          success: function (data) {
            var dataObj = data.data
            var uuid = dataObj.uuid;
            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") {
              //文件已经上传过
              fetchImg(dataObj.path)
              $("#uuid").append(uuid);
              alert("文件已经上传过,秒传了！！");
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("服务器出错!");
          }
        });
      })
    }

    /*
    * file 文件对象
    * uuid 后端生成的uuid
    * filemd5 整个文件的md5
    * date  文件第一个分片上传的日期(如:20170122)
    */
    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 = 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/>");
      document.querySelector('#substr').style.width = (ssindex / shardCount * 100) + "%"
      //按大小切割文件段　　
      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://192.168.1.118:8899/fileUpload/upload2",
          type: "POST",
          data: form,
          async: true,        //异步
          processData: false,  //很重要，告诉jquery不要对form进行处理
          contentType: false,  //很重要，指定为false才能形成正确的Content-Type
          headers: { 'x-auth-token': '00000000000000000' },
          success: function (data) {
            var dataObj = data.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);
              }
            }
            if (flag === '4') {
              fetchImg(dataObj.fileUrl)
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("服务器出错!");
          }
        });
      })
    }

    // 获取图片
    function fetchImg(videoUrl) {
      //Ajax提交
      $.ajax({
        url: "http://192.168.1.118:8899/fileUpload/getMediaPreview",
        type: "post",
        data: { videoUrl },
        async: true,        //异步
        headers: { 'x-auth-token': '00000000000000000' },
        success: function (data) {
          console.log(data, 'oooooooooooooooooooooo')
        },
        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>
  <div style='width: 300px; height: 10px; background: #ccc'>
    <div id='substr' style="width: 0;height: 10px; background: green"></div>
  </div>
</body>

</html>

controller

package com.yxtech.sys.controller;

import com.yxtech.common.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 2015/10/9.
 */
@RestController
@Scope("prototype")
@RequestMapping(value = "/test")
public class testController {
    @Autowired
    private FileResService fileResService;
    @Autowired
    private 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"); //整个文件的md5
        String date = request.getParameter("date"); //文件第一个分片上传的日期(如:20170122)
        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 2017-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\\20170122\\2124b3f9-a4c8-4297-a182-6249010dcd72\\2124b3f9-a4c8-4297-a182-6249010dcd72_"+i);
            File file = new File("F:\\bookQr_SYS\\target\\bookQr\\files\\20170122\\2124b3f9-a4c8-4297-a182-6249010dcd72.mp4");
            String md5Str = getFileMD5(file);
            System.out.println(""+md5Str.length()+" "+md5Str);
//        }

    }
}

NameUtil

/**
 * Created by Administrator on 2015/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 2015/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 http://www.qh.com: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();
    }


}