webuploader分片上传的实现代码(前后端分离)


Posted in Javascript onSeptember 10, 2018

本文介绍了webuploader分片上传的实现代码(前后端分离),分享给大家,具体如下:

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。(这个是从官网上直接copy的解释)

功能描述

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

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

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

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

5、容器用springboot内置的tomcat插件,运行Application的main方法即可启动服务;

显示效果

webuploader分片上传的实现代码(前后端分离)

webuploader分片上传的实现代码(前后端分离)

webuploader分片上传的实现代码(前后端分离)

关键代码前端

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); 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
再谈JavaScript线程
Jul 10 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
ES6使用export和import实现模块化的方法
Sep 10 #Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 #Javascript
浅谈微信小程序flex布局基础
Sep 10 #Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP时间和日期函数详解
2015/05/08 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
js日期时间补零的小例子
2013/03/05 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
package.json各个属性说明详解
2020/03/11 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
MySQL适配器PyMySQL详解
2017/09/20 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python实现简单的五子棋游戏
2020/09/01 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
为什么要有struct关键字
2012/05/08 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
行政专员的岗位职责
2014/03/10 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书