學習筆記：利用七牛雲上傳圖片小結

目的

相似朋友圈發圖，選擇圖片上傳並展現出來

引入外部文件

從瀏覽器端上傳文件至七牛雲，並對上傳成功後的圖片進行數據處理操做。

• 引入Plupload *
  該SDK上傳功能集於Plupload插件封裝，因此須要下載Plupload; plupload.dev.js

• 引入qiniu.js
  爲了簡便，當時直接從官網示例中複製的js文件

• 引入moxie.js
  由於Plupload插件除了能解決h5的上傳問題，還能上傳flash等，因此須要該文件。原本咱們是不須要的，但因爲plupload.dev.js和qiniu.js裏面有依賴於moxie.js的代碼，若是不引入，就一直報錯：moxie not defined,挺頭疼的，索性一併引入了

由於互相依賴，因此引入的順序也很重要，先是moxie.js => plupload.dev.js => qiniu.js => index.js

上傳

環境搭好了，在index.js中進行初始化

var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4',      // 上傳模式，依次退化
    browse_button: 'pickfiles',         // 上傳選擇的點選按鈕ID，必需
    // 在初始化時，uptoken，uptoken_url，uptoken_func三個參數中必須有一個被設置
    // 且若是提供了多個，其優先級爲uptoken > uptoken_url > uptoken_func
    // 其中uptoken是直接提供上傳憑證，uptoken_url是提供了獲取上傳憑證的地址，若是須要定製獲取uptoken的過程則能夠設置uptoken_func
    // uptoken : '<Your upload token>', // uptoken是上傳憑證，由其餘程序生成
    // uptoken_url: '/uptoken',         // Ajax請求uptoken的Url，強烈建議設置（服務端提供）
    // uptoken_func: function(file){    // 在須要獲取uptoken時，該方法會被調用
    //    // do something
    //    return uptoken;
    // },
    get_new_uptoken: false,             // 設置上傳文件的時候是否每次都從新獲取新的uptoken
    // downtoken_url: '/downtoken',
    // Ajax請求downToken的Url，私有空間時使用，JS-SDK將向該地址POST文件的key和domain，服務端返回的JSON必須包含url字段，url值爲該文件的下載地址
    // unique_names: true,              // 默認false，key爲文件名。若開啓該選項，JS-SDK會爲每一個文件自動生成key（文件名）
    // save_key: true,                  // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啓，SDK在前端將不對key進行任何處理
    domain: '<Your bucket domain>',     // bucket域名，下載資源時用到，必需
    container: 'container',             // 上傳區域DOM ID，默認是browser_button的父元素
    max_file_size: '100mb',             // 最大文件體積限制
    flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash，相對路徑
    max_retries: 3,                     // 上傳失敗最大重試次數
    dragdrop: true,                     // 開啓可拖曳上傳
    drop_element: 'container',          // 拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
    chunk_size: '4mb',                  // 分塊上傳時，每塊的體積
    auto_start: true,                   // 選擇文件後自動上傳，若關閉須要本身綁定事件觸發上傳
    //x_vars : {
    //    查看自定義變量
    //    'time' : function(up,file) {
    //        var time = (new Date()).getTime();
          // do something with 'time'
    //        return time;
    //    },
    //    'size' : function(up,file) {
    //        var size = file.size;
          // do something with 'size'
    //        return size;
    //    }
    //},
    init: {
        'FilesAdded': function(up, files) {
            plupload.each(files, function(file) {
                // 文件添加進隊列後，處理相關的事情
            });
        },
        'BeforeUpload': function(up, file) {
               // 每一個文件上傳前，處理相關的事情
        },
        'UploadProgress': function(up, file) {
               // 每一個文件上傳時，處理相關的事情
        },
        'FileUploaded': function(up, file, info) {
               // 每一個文件上傳成功後，處理相關的事情
               // 其中info是文件上傳成功後，服務端返回的json，形式如：
               // {
               //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
               //    "key": "gogopher.jpg"
               //  }
               // 查看簡單反饋
               // var domain = up.getOption('domain');
               // var res = parseJSON(info);
               // var sourceLink = domain +"/"+ res.key; 獲取上傳成功後的文件的Url
        },
        'Error': function(up, err, errTip) {
               //上傳出錯時，處理相關的事情
        },
        'UploadComplete': function() {
               //隊列文件處理完畢後，處理相關的事情
        },
        'Key': function(up, file) {
            // 若想在前端對每一個文件的key進行個性化處理，能夠配置該函數
            // 該配置必需要在unique_names: false，save_key: false時才生效

            var key = "";
            // do something with key here
            return key
        }
    }
});

// domain爲七牛空間對應的域名，選擇某個空間後，可經過 空間設置->基本設置->域名設置 查看獲取

// uploader爲一個plupload對象，繼承了全部plupload的方法

這樣基本沒什麼問題了。若是要限制上傳文件的格式，能夠添加屬性filter

filter: {
      mime_types : [
        { title : "Image files", extensions : "jpg,gif,png"}
      ],
      max_file_size: "200mb",
      prevent_duplicates: true
}

後來要限制上傳的圖片張數不超過九張，若是超過就提示。這樣，auto_start設置了true就不太好了，改爲false,手動上傳。在FilesAdded方法中判斷隊列中的文件個數，若是沒有超過，就調用uploader.start()就接着上傳了。

遇到的烏龍

• 文件的引入問題

• domain獲取錯誤，結果圖片的url錯誤，找不到

• 設置了自動上傳，結果一點上傳，一股腦就執行完了一連串的步驟

總結

多看文檔，多比較人家的實例