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 相关文章推荐
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
js实现div在页面拖动效果
May 04 Javascript
js如何获取网页所有图片
May 12 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php编程每天必学之验证码
2016/03/03 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery操作cookie
2016/08/08 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
使用Python对SQLite数据库操作
2017/04/06 Python
对Python中内置异常层次结构详解
2018/10/18 Python
numpy数组广播的机制
2019/07/12 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
scrapy-splash简单使用详解
2021/02/21 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
高三上学期学习自我评价
2014/04/23 职场文书
青年志愿者活动总结
2014/04/26 职场文书
高一新生军训方案
2014/05/12 职场文书
出差报告范文
2014/11/06 职场文书
组织生活会发言材料
2014/12/15 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
鸦片战争观后感
2015/06/09 职场文书
初一数学教学反思
2016/02/17 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python