因为这是小众需求,所以默认没有做在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