本帖最后由 谷粒姐姐 于 2019-6-13 09:43 编辑
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]
| 
收藏
淘帖
踩
