黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day13（十一） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-5-28 11:12
标题: 【郑州校区】Java的新项目学成在线笔记-day13（十一）


6.3.3.1 钩子方法
在webuploader中提供很多钩子方法，下边列出一些重要的：

本项目使用如下钩子方法：
1）before-send-file
在开始对文件分块儿之前调用，可以做一些上传文件前的准备工作，比如检查文件目录是否创建完成等。

2）before-send
在上传文件分块之前调用此方法，可以请求服务端检查分块是否存在，如果已存在则此分块儿不再上传。
3）after-send-file
在所有分块上传完成后触发，可以请求服务端合并分块文件。
注册钩子方法源代码：

[AppleScript] 纯文本查看 复制代码

WebUploader.Uploader.register({    

 "before‐send‐file":"beforeSendFile",  

   "before‐send":"beforeSend",  

   "after‐send‐file":"afterSendFile"  

 }

6.3.3.2 构建WebUploader
使用webUploader前需要创建webUploader对象。 指定上传分块的地址：/api/media/upload/uploadchunk

[AppleScript] 纯文本查看 复制代码

// 创建uploader对象，配置参数 this.uploader = WebUploader.create(   {   

  swf:"/static/plugins/webuploader/dist/Uploader.swf",//上传文件的flash文件，浏览器不支持h5时启动 flash  

   server:"/api/media/upload/uploadchunk",//上传分块的服务端地址，注意跨域问题   

  fileVal:"file",//文件上传域的name     pick:"#picker",//指定选择文件的按钮容器  

   auto:false,//手动触发上传   

  disableGlobalDnd:true,//禁掉整个页面的拖拽功能  

   chunked:true,// 是否分块上传  

   chunkSize:1*1024*1024, // 分块大小（默认5M） 

    threads:3, // 开启多个线程（默认3个）

     prepareNextFile:true// 允许在文件传输时提前把下一个文件准备好   } )

6.3.3.3 before-send-file
文件开始上传前前端请求服务端准备上传工作。
参考源代码如下：

[AppleScript] 纯文本查看 复制代码

type:"POST", url:"/api/media/upload/register", data:{ 

  // 文件唯一表示 

  fileMd5:this.fileMd5, 

 fileName: file.name, 

  fileSize:file.size, 

  mimetype:file.type,   

fileExt:file.ext }

6.3.3.4 before-send
上传分块前前端请求服务端校验分块是否存在。

[AppleScript] 纯文本查看 复制代码

参考源代码如下：[mw_shl_code=applescript,true][mw_shl_code=applescript,true]type:"POST", url:"/api/media/upload/checkchunk", data:{  

// 文件唯一表示 

  fileMd5:this.fileMd5,  

// 当前分块下标  

chunk:block.chunk, 

  // 当前分块大小 

  chunkSize:block.end‐block.start 

}[/mw_shl_code][/mw_shl_code]

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2