百度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