【原创】webuploader分片上传（前后端分离）

项目地址：

https://download.csdn.net/download/zxcnlmx/10389632

功能描述

1、webuploader是百度研发的上传组件，文档不是特别规整，但是也够用了。

2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。

3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。

4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。

5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果

关键代码

前端

WebUploader.Uploader.register({              'name': 'webUploaderHookCommand',              'before-send-file': 'beforeSendFile',              "before-send": "beforeSend"          }, {              beforeSendFile: function(file) {                  var task = new WebUploader.Deferred();                  fileName = file.name;                  fileSize = file.size;                  (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function(percentage) {}).then(function(val) {                      fileMd5 = val;                      var url = checkUrl;                      var data = {                          type: 0,                          fileName: fileName,                          fileMd5: fileMd5,                          fileSize: fileSize                      };                      $.ajax({                          type: "POST",                          url: url,                          data: data,                          cache: false,                          async: false, // 同步                          timeout: 1000, // todo 超时的话，只能认为该分片未上传过                          dataType: "json",                          error: function(XMLHttpRequest, textStatus, errorThrown) {                              file.statusText = 'server_error';                              task.reject();                          }                      }).then(function(data, textStatus, jqXHR) {                          if(data.rtn == 0) {                              if(data.obj == 1) {                                  file.statusText = 'file_existed';                                  task.reject();                              } else {                                  task.resolve();                              }                          } else {                              task.reject();                          }                      });                  });                  return task.promise();              },              beforeSend: function(block) {                  var task = new WebUploader.Deferred();                  var url = checkUrl;                  var data = {                      type: 1,                      fileName: fileName,                      fileMd5: fileMd5,                      chunk: block.chunk,                      fileSize: block.end - block.start                  };                  $.ajax({                      type: "POST",                      url: url,                      data: data,                      cache: false,                      async: false, // 同步                      timeout: 1000, // todo 超时的话，只能认为该分片未上传过                      dataType: "json"                  }).then(function(data, textStatus, jqXHR) {                      if(data.rtn == 0 && data.obj == 1) {                          task.reject(); // 分片存在，则跳过上传                      } else {                          task.resolve();                      }                  });                  this.owner.options.formData.fileMd5 = fileMd5;                  this.owner.options.formData.chunkSize = chunkSize;                  return task.promise();              }          });  

    // 实例化      uploader = WebUploader.create({          pick: {              id: '#filePicker',              label: '点击选择文件'          },          formData: {              uid: 123          },          dnd: '#dndArea', //指定文件拖拽的区域          paste: '#uploader', //指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.          swf: '../plugins/webuploader/Uploader.swf',          chunked: true,          chunkSize: chunkSize,          chunkRetry: false,          threads: 1,          server: uploadUrl,          // runtimeOrder: 'flash',          // accept: {          //     title: 'Images',          //     extensions: 'gif,jpg,jpeg,bmp,png',          //     mimeTypes: 'image/*'          // },          // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。          disableGlobalDnd: true,          fileNumLimit: 300 //限制多文件上传的个数          //fileSizeLimit: 200 * 1024 * 1024, // 限制所有文件的大小 200 M          //fileSingleSizeLimit: 50 * 1024 * 1024 // 限制单个文件的大小 50 M      });  

后端

import java.io.File;  import java.io.IOException;  import org.slf4j.Logger;  import org.slf4j.LoggerFactory;  import org.springframework.beans.factory.annotation.Value;  import org.springframework.stereotype.Service;  import org.springframework.web.multipart.MultipartFile;  import com.bear.upload.util.FileUtil;  import com.bear.upload.util.RETURN;  import com.bear.upload.vo.CheckMd5FileVO;  import com.bear.upload.vo.UploadVO;  @Service  public class ChunkUploadService {      private static Logger LOG = LoggerFactory.getLogger(ChunkUploadService.class);      @Value("${file.upload.path}")      private String UPLOAD_PATH;      private static final String Delimiter = "-";      /**      * 上传之前校验(整个文件、分片)      *       * @param md5FileVO      * @return      */      public Object check(CheckMd5FileVO md5FileVO) {          Integer type = md5FileVO.getType();          Long chunk = md5FileVO.getChunk();          String fileName = md5FileVO.getFileName();          Long fileSize = md5FileVO.getFileSize();          if (type == 0) {// 未分片校验              String destfilePath = UPLOAD_PATH + File.separator + fileName;              File destFile = new File(destfilePath);              if (destFile.exists() && destFile.length() == fileSize) {                  return RETURN.success("文件已存在，跳过", 1);              } else {                  return RETURN.success("文件不存在", 0);              }          } else {// 分片校验              String fileMd5 = md5FileVO.getFileMd5();              String destFileDir = UPLOAD_PATH + File.separator + fileMd5;              String destFileName = chunk + Delimiter + fileName;              String destFilePath = destFileDir + File.separator + destFileName;              File destFile = new File(destFilePath);              if (destFile.exists() && destFile.length() == fileSize) {                  return RETURN.success("分片已存在，跳过", 1);              } else {                  return RETURN.success("分片不存在", 0);              }          }      }      /**      * 文件上传      *       * @param file      * @param uploadVO      * @param appVersion      * @return      */      public Object upload(MultipartFile file, UploadVO uploadVO) {          Long chunk = uploadVO.getChunk();          if (chunk == null) {// 没有分片              return UnChunkUpload(file, uploadVO);          } else {// 分片              return ChunkUpload(file, uploadVO);          }      }      /**      * 分片上传      *       * @param file      * @param uploadVO      * @param appVersion      * @return      */      public Object ChunkUpload(MultipartFile file, UploadVO uploadVO) {          String fileName = uploadVO.getName();          String fileMd5 = uploadVO.getFileMd5();          Long chunk = uploadVO.getChunk();// 当前片          Long chunks = uploadVO.getChunks();// 总共多少片          // 分片目录创建          String chunkDirPath = UPLOAD_PATH + File.separator + fileMd5;          File chunkDir = new File(chunkDirPath);          if (!chunkDir.exists()) {              chunkDir.mkdirs();          }          // 分片文件上传          String chunkFileName = chunk + Delimiter + fileName;          String chunkFilePath = chunkDir + File.separator + chunkFileName;          File chunkFile = new File(chunkFilePath);          try {              file.transferTo(chunkFile);          } catch (Exception e) {              LOG.error("分片上传出错", e);              return RETURN.fail("分片上传出错", 1);          }          // 合并分片          Long chunkSize = uploadVO.getChunkSize();          long seek = chunkSize * chunk;          String destFilePath = UPLOAD_PATH + File.separator + fileName;          File destFile = new File(destFilePath);          if (chunkFile.length() > 0) {              try {                  FileUtil.randomAccessFile(chunkFile, destFile, seek);              } catch (IOException e) {                  LOG.error("分片{}合并失败：{}", chunkFile.getName(), e.getMessage());                  return RETURN.fail("分片合并失败", 1);              }          }          if (chunk == chunks - 1) {              // 删除分片文件夹              FileUtil.deleteDirectory(chunkDirPath);              return RETURN.success("上传成功", 1);          } else {              return RETURN.fail("上传中...", 1);          }      }      /**      * 未分片上传      *       * @param file      * @param uploadVO      * @param appVersion      * @return      */      public Object UnChunkUpload(MultipartFile file, UploadVO uploadVO) {          String fileName = uploadVO.getName();          // String fileMd5 = uploadVO.getFileMd5();          // 文件上传          File destFile = new File(UPLOAD_PATH + File.separator + fileName);          if (file != null && !file.isEmpty()) {              // 上传目录              File fileDir = new File(UPLOAD_PATH);              if (!fileDir.exists()) {                  fileDir.mkdirs();              }              if (destFile.exists()) {                  destFile.delete();              }              try {                  file.transferTo(destFile);                  return RETURN.success("上传成功", 0);              } catch (Exception e) {                  LOG.error("文件上传出错", e);                  return RETURN.fail("文件上传出错", 0);              }          }          return RETURN.fail("上传失败", 0);      }  }