Java的新项目学成在线笔记-day13（十一）

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

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

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

?

1 2 3 4 5

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] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10

// 创建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] 纯文本查看 复制代码

?

1 2 3 4 5 6 7

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] 纯文本查看 复制代码

?

1 2 3 4 5 6 7

[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]