百度webuploader如何实现秒传与断点续传

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

巴特西

百度webuploader如何实现秒传与断点续传

最新文章

热门文章