摘要：后來查閱了資料后自己手動實現了文件切片上傳到服務器基本需求已經實現，但由于效率及穩定性問題后來決定還是直傳文件到七牛云。總結起來七牛云上傳的套路就是后臺為你提供或者獲取的接口地址之后上傳的時候要帶上這個。

最近在工作中有個上傳大文件的需求，原先咨詢過組里的大佬給我推薦了百度的webupload，但后來引入之后發現它是基于jquery封裝的。由于本身項目是基于vue開發的所以與jquery相關的開源框架就盡量不考慮了。

后來查閱了資料后自己手動實現了文件切片上傳到服務器基本需求已經實現，但由于效率及穩定性問題后來決定還是直傳文件到七牛云。一開始我使用了表單上傳的方式實現了，后來種種原因又要求我做成分片上傳。。

那我只好引入七牛的jssdk，于是走向了無盡的踩坑之路...

首先，剛接觸一門新的技術我們還是先去官方文檔走一圈了解下基本用法～
https://developer.qiniu.com/k...
通讀一遍之后我再來講講官網給我們埋下了多少個坑。。。

首先官網給我們提供了三個至關重要的鏈接，嗯樓主好人一生平安。
前面兩個都是gayhub鏈接我們可以下載其sdk源碼在項目中引入。如果想預先體驗一下上傳可以點擊第三個鏈接去官方demo玩一玩。

后端返回給你的獲取token的json格式必須是這種格式的。必須是一個json對象內部包裹著uptoken字段，帶上其他字段也是可以的但是必須第一層要能找到uptoken

    {
    "uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL...",
    "xxx": "..."
    }

因為在它的sdk源碼中是這么獲取token的。他會先找定義的option字段中是否有uptoken，如果沒有再去找uptoken_url有就發送ajax請求去獲取uptoken字段，倘若后端必須要以他的格式為主那你可以修改sdk源碼來實現。如果uptoken_url也沒有值就回去調用uptoken_func函數都沒有則報錯，所以這三個必須指定一個.

        // getUptoken maybe called at Init Event or BeforeUpload Event
        // case Init Event, the file param of getUptken will be set a null value
        // if op.uptoken has value, set uptoken with op.uptoken
        // else if op.uptoken_url has value, set uptoken from op.uptoken_url
        // else if op.uptoken_func has value, set uptoken by result of op.uptoken_func
        var getUpToken = function(file) {
            if (op.uptoken) {
                that.token = op.uptoken;
                return;
            } else if (op.uptoken_url) {
                logger.debug("get uptoken from: ", that.uptoken_url);
                // TODO: use mOxie
                var ajax = that.createAjax();
                ajax.open("GET", that.uptoken_url, false);
                ajax.setRequestHeader("If-Modified-Since", "0");
                // ajax.onreadystatechange = function() {
                //     if (ajax.readyState === 4 && ajax.status === 200) {
                //         var res = that.parseJSON(ajax.responseText);
                //         that.token = res.uptoken;
                //     }
                // };
                ajax.send();
                if (ajax.status === 200) {
                    var res = that.parseJSON(ajax.responseText);
                    that.token = res.uptoken;
                    logger.debug("get new uptoken: ", res.uptoken);
                } else {
                    logger.error("get uptoken error: ", ajax.responseText);
                }
                return;
            } else if (op.uptoken_func) {
                logger.debug("get uptoken from uptoken_func");
                that.token = op.uptoken_func(file);
                logger.debug("get new uptoken: ", that.token);
                return;
            } else {
                logger.error("one of [uptoken, uptoken_url, uptoken_func] settings in options is required!");
            }
        };

再往下看是這么一段話

我說你就短短1419行代碼還能分片上傳斷點續傳還兼容各大瀏覽器這不科學啊。原來是基于plupload插件之上封裝的。注意plupload已經更新到2.3.1了，并且2.2開始已經把moxie干掉了而七牛云的sdk是需要moxie的，所以如果你引入了2.2及其以上的版本會報這樣的錯誤

Uncaught ReferenceError: mOxie is not defined

此處奉上cdn地址

中間的版本號可以更換成你想要的，但是建議大家直接訪問cdn地址copy下來用本地路徑訪問。
七牛sdk還是支持npm引入形式的，你可以通過npm安裝

npm install qiniu-js

然后在項目中使用import引入

import "qiniu-js/dist/qiniu.min.js";

但是這樣不方便修改源代碼而且修改了源代碼之后下一個人接到你的項目重新npm install之后又會有各種坑。所以建議提取出來放到公共路徑通過script方式引入，不過我覺得可以自己封裝一層通過import引入更好～

經過上面兩個步驟我們項目應該是這樣的：

此處我是將文件提取到static目錄下面，用過vue-cli的應該知道～
這里你可以選擇引入plupload生產文件或者替換成上面兩種文件就是開發調試版本～

那么現在我們要開擼了～
首先，沒有什么是一個div解決不了的，倘若你還想實現拖拽上傳那就兩個。

    
上傳按鈕

接下來我們要編寫配置信息以及處理上傳的事件。在vue中我們需要寫在mouted函數中。

  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 : "", // uptoken是上傳憑證，由其他程序生成
      uptoken_url: "/uptoken",         // Ajax請求uptoken的Url，強烈建議設置（服務端提供）
      uptoken_func: function(){        // 在需要獲取uptoken時，該方法會被調用
         // do something(一般是發送手動發送ajax獲取到token，如果后端返回格式不跟官方一致又不想該懂源代碼可以通過這個方式調整)
         return uptoken;
      },
      get_new_uptoken: false,             // 設置上傳文件的時候是否每次都重新獲取新的uptoken(沒有特殊需求一般為false)
      // 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: "",     // bucket域名，下載資源時用到，必需(找后端拿)
      container: "container",             // 上傳區域DOM ID，默認是browser_button的父元素(如果不實現拖拽上傳可以不設置)
      max_file_size: "100mb",             // 最大文件體積限制(可以調大)
      flash_swf_url: "path/of/plupload/Moxie.swf",  //引入flash，相對路徑(如果沒用到flash上傳的話可以不設置,一般支持html5上傳的瀏覽器都不會用到它)
      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
              // (可以自定義key不設定默認是文件名)
              return key
          }
      }
  });

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

  // uploader為一個plupload對象，繼承了所有plupload的方法

如果頁面中由多個上傳實例，那無非就是多創建幾個upload對象傳入指定參數設置～

由于本次項目中只涉及到大文件上傳，沒有圖像處理等相關的api使用經驗官方的案例就不多講了。總結起來七牛云上傳的套路就是后臺為你提供uptoken或者獲取uptoken的接口地址之后上傳的時候要帶上這個token。返回的字段最好是按照官方的格式來，如果不是的話也可以修改源代碼或者在uptoken_func中手動獲取，另外如果要修改上傳的服務器也是要在qiniu.js中修改

    /**
     * qiniu upload urls
     * "qiniuUploadUrls" is used to change target when current url is not avaliable
     * @type {Array}
     */
    var qiniuUploadUrls = [
        // "http://upload.qiniu.com",
        // "http://up.qiniu.com",
        "修改成你需要的地址",
    ];

如果使用表單上傳的話可以不引用任何插件直接生擼上去。代碼實現如下：

html:
        

            
            
            

            
            

            
            

            
        

js:
    upload() {
        const formdata = new FormData(document.getElementById("testform"));
        $.ajax({
            url: "上傳的七牛云服務器,后端提供", // "http://up.qiniu.com"
            method: "post",
            success: function(data) {
                console.log(data);
            },
        })
        ...
    }

需要注意的是，每個input都需要定義好那么屬性，并且token不能為空，需要提前通過ajax去后端獲取或者使用后端給定的token否則上傳會失敗～
后續有新的進展繼續更新～

看來還是很多人不太懂怎么用，需要個在線demo來玩玩-。-
我擼了個demo，有需要自取～
https://gitee.com/christboy.n...