因为这是小众需求,所以默认没有做在webuploader里面,而只是提供hook接口,让用户很简单的扩展此功能。

那么,都有哪些重要的hook接口呢?

  • before-send-file 此hook在文件发送之前执行
  • before-file 此hook在文件分片(如果没有启用分片,整个文件被当成一个分片)后,上传之前执行。
  • after-send-file 此hook在文件所有分片都上传完后,且服务端没有错误返回后执行。
  • ...

对于秒传来说,其实就是文件上传前,把内容读取出来,算出md5值,然后通过ajax与服务端验证进行验证, 然后根据结果选择继续上传还是掉过上传。

像这个操作里面有两个都是异步操作,文件内容blob读取和ajax请求。所以这个handler必须是异步的,怎样告诉组件此handler是异步的呢?只需要在hanlder里面返回一个promise对象就可以了,这样webuploader就会等待此过程,监听此promise的完成事件,自动继续。

以下是此思路的简单实现。

Uploader.register({
'before-send-file': 'preupload'
}, {
preupload: function( file ) {
var me = this,
owner = this.owner,
server = me.options.server,
deferred = WebUploader.Deferred(); owner.md5File( file.source ) // 如果读取出错了,则通过reject告诉webuploader文件上传出错。
.fail(function() {
deferred.reject();
}) // md5值计算完成
.then(function( md5 ) { // 与服务安验证
$.ajax(server, {
dataType: 'json',
data: {
md5: ret
},
success: function( response ) { // 如果验证已经上传过
if ( response.exist ) {
owner.skipFile( file ); console.log('文件重复,已跳过');
} // 介绍此promise, webuploader接着往下走。
deferred.resolve();
}
});
}); return deferred.promise();
}
});

详情参考:https://github.com/fex-team/webuploader/issues/142

05-18 18:14