1. 程式人生 > >百度webuploader如何實現秒傳與斷點續傳

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