5.2 SpringBoot实现断点续传功能 > 我的程序猿之路：第四十二章

功能使用webuploader组件分片下载文件 文档地址： http://fex.baidu.com/webuploader/document.html

从

 http://fex.baidu.com/webuploader/download.html中下载

用到的是：

              Uploader.swf

              webuploader.css

              webuploader.min.js

我的目录

需要jar包：

        commons-fileupload-1.3.3.jar

        commons-io-2.5.jar

    导入jar包方法：Shift+Ctrl+Alt+s

 

    按步骤导入   jar包。。。

webUploader.java

package com.example.demo3.upLoader;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;

@RequestMapping("uploader.do")
@Controller
public class WebUpLoaderController {
    private static final long serialVersionUID = 1L;
    @RequestMapping("loader")
    public void douploader(HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        String fileName = request.getParameter("fileName");
        String fileMd5 = request.getParameter("fileMd5");
        String chunk = request.getParameter("chunk");
        String chunkSize = request.getParameter("chunkSize");
        String guid = request.getParameter("guid");

        String path = ("C:/upload/uploads");
        File checkFile = new File(path+"/"+guid+"/"+chunk);

        response.setContentType("text/html;charset=utf-8");

        //检查文件是否存在，且大小是否一致
        if(checkFile.exists() && checkFile.length()==Integer.parseInt(chunkSize)){
            //上传过

                response.getWriter().write("{"ifExist":1}");

        }else{
            //没有上传过

                response.getWriter().write("{"ifExist":0}");

        }

    }
    @RequestMapping("loader2")
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         String path = "C:\upload\uploads";
         String guid = request.getParameter("guid");
         String fileName = request.getParameter("fileName");
        /**
         * 进行文件合并
         */
        File file = new File(path+"/"+guid);
        new File("C:\upload\upload"+"/"+guid).mkdirs();
        /**
         * 进行文件合并
         */
        File newFile = new File("C:\upload\upload"+"/"+guid+"/"+fileName);
        FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加写入
        byte[] byt = new byte[10*1024*1024];
        int len;
        FileInputStream temp = null;//分片文件
        File[] childs = new File(path+"/"+guid).listFiles();
        boolean boo = false;
        if(childs!=null) {
            for (int i = 0; i < childs.length; i++) {
                temp = new FileInputStream(childs[i]);
                while ((len = temp.read(byt)) != -1) {
                    //System.out.println(len);
                    outputStream.write(byt, 0, len);
                }
                temp.close();
                boo=true;
            }
        }
        /**
         * 当所有追加写入都写完  才可以关闭流
         */
        outputStream.close();
        if(temp!=null){
            temp.close();
        }
        if(boo) {
            delFolder(path + "/" + guid);
        }

    }
    @RequestMapping("loader1")
    protected void doupload(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String path = "C:\upload\uploads";
        //DiskFileItemFactory factory = new DiskFileItemFactory();
        // 2、创建一个文件上传解析器
        ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());

        // 设置单个文件的最大上传值
        upload.setFileSizeMax(15*1024*1024L);
        // 设置整个request的最大值
        upload.setSizeMax(15*1024*1024L);
        // 解决上传文件名的中文乱码
        upload.setHeaderEncoding("UTF-8");
        //  fileUpload.setProgressListener(listener);
        // 3、判断提交上来的数据是否是上传表单的数据
        if (!ServletFileUpload.isMultipartContent(request)) {
            return;
        }
        // 4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
        List<FileItem> list = null;
        try {

            list = upload.parseRequest(request);
            // 获得文件：
            //    MultipartFile file = multipartRequest.getFile(" file ");
        } catch (FileUploadException e) {
            e.printStackTrace();
        }

        HashMap<String, String> map = new HashMap<String, String>();

        for (FileItem item : list) {
            if (item.isFormField()) {
                String name = item.getFieldName();
                // 解决普通输入项的数据的中文乱码问题
                String value = item.getString("UTF-8");

                map.put(name, value);// 放入map集合
            } else {
                /**
                 * 文件上传
                 */

                File fileParent = new File(path + "/" + map.get("guid"));//以guid创建临时文件夹
                if (!fileParent.exists()) {
                    fileParent.mkdir();
                }


                String filename = item.getName();
                if (filename == null || filename.trim().equals("")) {
                    continue;
                }
                // 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：
                // c:a1.txt，而有些只是单纯的文件名，如：1.txt
                // 处理获取到的上传文件的文件名的路径部分，只保留文件名部分
                filename = filename.substring(filename.lastIndexOf("\") + 1);

                //创建文件
                File file;
                if (map.get("chunks") != null) {
                    file = new File(fileParent, map.get("chunk"));
                } else {
                    file = new File(fileParent, "0");
                }

                //copy
                FileUtils.copyInputStreamToFile(item.getInputStream(), file);
                item.getInputStream().close();
            }
        }
    }
    /***
     * 删除文件夹
     */
    public  static void delFolder(String paths) {
        try {
            delAllFile(paths); // 删除完里面所有内容
            String filePath = paths;
            filePath = filePath.toString();
            File myFilePath = new File(filePath);
            myFilePath.delete(); // 删除空文件夹
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /***
     * 删除指定文件夹下所有文件
     * @return
     */
    public static  boolean delAllFile(String paths) {
        boolean flag = false;
        //判断这个路径名是否存在
        File file = new File(paths);
        if (!file.exists()) {
            return flag;
        }
        //是否是一个目录
        if (!file.isDirectory()) {
            return flag;
        }
        //返回由此抽象路径名所表示的目录中的文件和目录的名称所组成字符串数组。
        String[] tempList = file.list();
        File temp = null;
        for (int i = 0; i < tempList.length; i++) {
            //paths是否以File.separator结束  方便不同平台下使用
            if (paths.endsWith(File.separator)) {
                //取一个 删除一个 ...
                temp = new File(file + tempList[i]);
            } else {
                //取一个 删除一个 ...
                temp = new File(file + File.separator + tempList[i]);
            }
            //是否是一个标准文件。
            if (temp.isFile()) {
                //是的话删除
                temp.delete();
                flag = true;
            }
            //是否是一个目录，如果是的话先删除（delAllFile）目录下的文件，然后再删除空文件夹
            if (temp.isDirectory()) {
                delAllFile(paths + "/" + tempList[i]);// 先删除文件夹里面的文件
                delFolder(paths + "/" + tempList[i]);// 再删除空文件夹
                flag = true;
            }
        }
        return flag;
    }
}

     webUploader.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Upload Page</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="/upload/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/upload/webuploader.min.js"></script>
    <link href="/upload/webuploader.css" type="css/text" />
    <script type="text/javascript" src="/upload/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="/upload/jquery-ui.js"></script>
    <link href="/upload/bootstrap.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="/upload/bootstrap.min.js"></script>

</head>

<body>
  <div style="margin: 22px 22px 22px 1px;">
      <div id="picker" class="form-control-focus">选择文件</div><br/>
      <p>允许上传文件类型:<b>.zip .dmp .rar .js .css .xml .7z .ico .pdf .ppt .pptx .xap .xpi .swf .apk .cdf .gif .tar .gz .sh .bmp .jpg</b><br />
      一次上传文件大小限制不小于:<b>50</b>MB</p>

      <table id="thelist" class="table table-bordered;uploader-list">
          <thead>
          <tr>
              <th>文件名</th>
              <th>文件大小</th>
              <th>状态</th>
              <th>操作</th>
          </tr>
          </thead>
      </table>

  </div>
  <button id="btnSync" type="button" class="btn btn-warning">开始同步</button>





  <script>
      var fileMd5;  //文件唯一标识

      /******************下面的参数是自定义的*************************/
      var fileName;//文件名称
      var oldJindu;//如果该文件之前上传过 已经上传的进度是多少
      var count=0;//当前正在上传的文件在数组中的下标，一次上传多个文件时使用
      var filesArr=new Array();//文件数组：每当有文件被添加进队列的时候 就push到数组中
      var map={};//key存储文件id，value存储该文件上传过的进度
      WebUploader.Uploader.register({
              "before-send-file":"beforeSendFile",//整个文件上传前
              "before-send":"beforeSend",  //每个分片上传前
              "after-send-file":"afterSendFile",  //分片上传完毕
          },
          {
              //时间点1：所有分块进行上传之前调用此函数
              beforeSendFile:function(file){
              //    alert('----');
                  var deferred = WebUploader.Deferred();
                  //1、计算文件的唯一标记fileMd5，用于断点续传  如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢 所以加了后面的参数：10*1024*1024
                  (new WebUploader.Uploader()).md5File(file,0,10*1024*1024).progress(function(percentage){
                      $('.'+file.id ).find('p.state').text('正在读取文件信息...');
                  })
                      .then(function(val){
                          $('.'+file.id ).find("p.state").text("成功获取文件信息...");
                          fileMd5=val;
                          uploader.options.formData.guid = fileMd5;
                          console.log("fileMd5:"+fileMd5);
                          //获取文件信息后进入下一步
                          deferred.resolve();
                      });

                  fileName=file.name; //为自定义参数文件名赋值
                  return deferred.promise();
              },
              //时间点2：如果有分块上传，则每个分块上传之前调用此函数
              beforeSend:function(block){
             //     alert('-******-');
                  var deferred = WebUploader.Deferred();
                  $.ajax({
                      type:"POST",
                      url:"/uploader.do/loader",  //ajax验证每一个分片
                      data:{
                          fileName : fileName,
                          fileMd5:fileMd5,  //文件唯一标记
                          chunk:block.chunk,  //当前分块下标
                          chunkSize:block.end-block.start,//当前分块大小
                          guid: uploader.options.formData.guid
                      },
                      cache: false,
                      async: false,  // 与js同步
                      timeout: 1000,
                      dataType:"json",
                      success:function(response){
                          console.log(block.chunk+"--"+response.ifExist);
                          if(response.ifExist){
                              //分块存在，跳过
                              deferred.reject();
                          }else{
                            //  alert("ss11")
                              //分块不存在或不完整，重新发送该分块内容
                              deferred.resolve();
                          }
                      }
                  });

                  this.owner.options.formData.fileMd5 = fileMd5;
                  deferred.resolve();
                  return deferred.promise();
              },
              //时间点3：所有分块上传成功后调用此函数
              afterSendFile:function(){
                //  alert('-***2222**-');
                  //如果分块上传成功，则通知后台合并分块
                  $.ajax({
                      type:"POST",
                      url:"${ctx}/mergeOrCheckChunks.do?param=mergeChunks",  //ajax将所有片段合并成整体
                      data:{
                          fileName : fileName,
                          fileMd5:fileMd5,
                      },
                      success:function(data){
                          count++; //每上传完成一个文件 count+1
                          ;                      if(count<=filesArr.length-1){
                              uploader.upload(filesArr[count].id);//上传文件列表中的下一个文件
                          }
                          //合并成功之后的操作
                      }
                  })
              }
          });
      var uploader = WebUploader.create({

          // swf文件路径
          swf : 'upload/Uploader.swf',
          // 文件接收服务端。
          server : '/uploader.do/loader1',
          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick : '#picker',
          chunked: true,  //分片处理
          chunkSize: 10 * 1024 * 1024, //每片5M
          threads:3,//上传并发数。允许同时最大上传进程数。
          // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          resize : false
      });

      function removeSection(e) {
       //   alert("当前第几行："+e.parentElement.parentElement.rowIndex)
          //alert("del:":+e.parentElement.parentElement.removeNode(true))
          //var a = e.parentElement.parentElement.rowIndex;
          //var table=document.getElementById("thelist");
          //var objt = $(obj);.remove();
          //    uploader.removeFile( file );
          var tr=e.parentNode.parentNode;
          tr.parentNode.removeChild(tr);
          //e.parentNode.removeChild(e.parentElement.parentElement.rowIndex);
          //table.deleteRow(e.parentElement.parentElement.rowIndex);
          //alert(table)
          //var len=table.rows.length;
          //alert(len)
          //      alert("ss"+e.id+"==="+e.name)
          //    $(e).parents(e.id).remove();
          //    $('[data-spy="scroll"]').each(function () {
          //        var $spy = $(this).scrollspy('refresh')
          //        });
      }
      // 当有文件被添加进队列的时候
      uploader.on('fileQueued', function(file) {
          //    alert(file.size)
          var fileName = file.name
          if (fileName.indexOf('#') >= 0) {
              alert('文件名中不能有井号');
              return false;
          }
          if (fileName.indexOf('+') >= 0) {
              alert('文件名中不能有加号');
              return false;
          }
          if (fileName.indexOf(' ') >= 0) {
              alert('文件名中不能有空格');
              return false;
          }
          var reg = /(.zip|.dmp|.rar|.js|.css|.xml|.7z|.ico|.pdf|.ppt|.pptx|.xap|.xpi|.swf|.apk|.cdf|.gif|.tar|.gz|.sh|.bmp|.jpg)$/ig;
          if (!reg.test(fileName)) {
              var supportType = reg.toString().replace(//|(|)|\|/ig, '');
              supportType = supportType.substring(0, supportType.length - 3);
              supportType = supportType.replace(/|/g, ' ');
              alert('不支持该上传文件类型！
支持的文件类型：' + supportType);
           //   return false;
          }
          if (file.size < 50*1024*1024)
          {
              alert('上传文件大小不能小于' + 50 + 'MB');
            //  return false;
          }
        //  alert(123);
          $("#thelist").append(
              '<tr class="'+ file.id +'">'
              +'<td ><h4 class="info">' + file.name + '</h4></td>'
              +'<td><font face="宋体" size=3 color="red">'+ file.size +' </font>'+'字节'+'</td>'
              +'<td id="' + file.id + '"><p class="state">等待上传...</p></td>'//onclick="removeSection(this);"
              +'<td><input type="button" class="remove-this" name="sss" id="'+ file.id +'"  value="删除" class="btn btn-default"/></td>'
              +'</tr>');
      });

      uploader.on('uploadProgress', function(file,percentage) {

          var $li = $('#' + file.id),
              $percent = $li.find('.progress .progress-bar');

          // 避免重复创建
          if (!$percent.length) {
              $percent = $('<div id="' + file.id + '" class="progress progress-striped active">' +
                  '<div class="progress-bar" style="height:20px; role="progressbar" style=" 0%">' +
                  '</div>' +
                  '</div>').appendTo($li).find('.progress-bar');
          }

          $('.'+file.id ).find('p.state').text('上传中');
          $percent.css('width', percentage * 100 + '%');
      });

      uploader.on('uploadSuccess', function(file) {
          $('.' + file.id).find('p.state').text('已上传');
          $.post("/uploader.do/loader2", { "guid": uploader.options.formData.guid,fileName:file.name},
              function(data){
              }, "json");
      });

      uploader.on('uploadError', function(file) {
          $('.' + file.id).find('p.state').text('上传出错');
      });

      uploader.on('uploadComplete', function(file) {
          $('.' + file.id).find('.progress').fadeOut();
      });

      uploader.on( 'beforeFileQueued', function( file ) {

       //   alert(file.size);

      });

      $("#btnSync").on('click', function() {
          if ($(this).hasClass('disabled')) {
              return false;
          }
          console.log("get fileMd5:"+fileMd5);

          uploader.upload();

      });
  </script>
</body>
</html>

application.propertise

#文件分片上传关闭multipart，不然的话request被预编译，文件解析器解析请求为空
spring.servlet.multipart.enabled=false

遇到的问题：

list = upload.parseRequest(request);（74行） list为空
我用Meclipse可以，idea就不行了，很纳闷。
网上找了很多，知道request被预编译，但是说法大多数struts配置影响的还有一些其他方法，
看来下，卧槽，那么复杂，我这么lazy，算了，再找找其他的。
最后在一片博文找到了方法，在application.propertise中

关闭multipart，问题解决

spring.servlet.multipart.enabled=false