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文件,浏览器不支持h 5 时启动 flash server : "/api/media/upload/uploadchunk" , / / 上传分块的服务端地址,注意跨域问题 fileVal : "file" , / / 文件上传域的 name pick : "#picker" , / / 指定选择文件的按钮容器 auto : false , / / 手动触发上传 disableGlobalDnd : true , / / 禁掉整个页面的拖拽功能 chunked : true , / / 是否分块上传 chunkSize : 1 * 1024 * 1024 , / / 分块大小(默认 5 M) 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 : { / / 文件唯一表示 fileMd 5 : this.fileMd 5 , 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 : { / / 文件唯一表示 fileMd 5 : this.fileMd 5 , / / 当前分块下标 chunk : block.chunk , / / 当前分块大小 chunkSize : block. end ‐block.start |
}[/mw_shl_code]