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

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

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

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

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

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

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

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

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

        // 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行代碼還能分片上傳斷點續(xù)傳還兼容各大瀏覽器這不科學(xué)啊。原來是基于plupload插件之上封裝的。注意plupload已經(jīng)更新到2.3.1了，并且2.2開始已經(jīng)把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引入更好～

經(jīng)過上面兩個步驟我們項目應(yīng)該是這樣的：

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

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

    
上傳按鈕

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

  var uploader = Qiniu.uploader({
      runtimes: "html5,flash,html4",      // 上傳模式，依次退化(照著官網(wǎng)來就是了)
      browse_button: "pickfiles",         // 上傳選擇的點選按鈕，必需(記得定義id并且保持一致)
      // 在初始化時，uptoken，uptoken_url，uptoken_func三個參數(shù)中必須有一個被設(shè)置
      // 切如果提供了多個，其優(yōu)先級為uptoken > uptoken_url > uptoken_func
      // 其中uptoken是直接提供上傳憑證，uptoken_url是提供了獲取上傳憑證的地址，如果需要定制獲取uptoken的過程則可以設(shè)置uptoken_func
      uptoken : "", // uptoken是上傳憑證，由其他程序生成
      uptoken_url: "/uptoken",         // Ajax請求uptoken的Url，強烈建議設(shè)置（服務(wù)端提供）
      uptoken_func: function(){        // 在需要獲取uptoken時，該方法會被調(diào)用
         // do something(一般是發(fā)送手動發(fā)送ajax獲取到token，如果后端返回格式不跟官方一致又不想該懂源代碼可以通過這個方式調(diào)整)
         return uptoken;
      },
      get_new_uptoken: false,             // 設(shè)置上傳文件的時候是否每次都重新獲取新的uptoken(沒有特殊需求一般為false)
      // downtoken_url: "/downtoken",(未使用到，可以不設(shè)置)
      // Ajax請求downToken的Url，私有空間時使用，JS-SDK將向該地址POST文件的key和domain，服務(wù)端返回的JSON必須包含url字段，url值為該文件的下載地址
      // unique_names: true,              // 默認(rèn)false，key為文件名。若開啟該選項，JS-SDK會為每個文件自動生成key（文件名）
      // save_key: true,                  // 默認(rèn)false。若在服務(wù)端生成uptoken的上傳策略中指定了sava_key，則開啟，SDK在前端將不對key進行任何處理
      domain: "",     // bucket域名，下載資源時用到，必需(找后端拿)
      container: "container",             // 上傳區(qū)域DOM ID，默認(rèn)是browser_button的父元素(如果不實現(xiàn)拖拽上傳可以不設(shè)置)
      max_file_size: "100mb",             // 最大文件體積限制(可以調(diào)大)
      flash_swf_url: "path/of/plupload/Moxie.swf",  //引入flash，相對路徑(如果沒用到flash上傳的話可以不設(shè)置,一般支持html5上傳的瀏覽器都不會用到它)
      max_retries: 3,                     // 上傳失敗最大重試次數(shù)(自動幫你續(xù)傳分片)
      dragdrop: true,                     // 開啟可拖曳上傳(如果不實現(xiàn)拖拽上傳可以不設(shè)置)
      drop_element: "container",          // 拖曳上傳區(qū)域元素的ID，拖曳文件或文件夾后可觸發(fā)上傳(如果不實現(xiàn)拖拽上傳可以不設(shè)置)
      chunk_size: "4mb",                  // 分塊上傳時，每塊的體積
      auto_start: true,                   // 選擇文件后自動上傳，若關(guān)閉需要自己綁定事件觸發(fā)上傳
      //x_vars : {                        // (未使用到，可以不設(shè)置)
      //    查看自定義變量
      //    "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) {
                  // 文件添加進隊列后，處理相關(guān)的事情
              });
          },
          "BeforeUpload": function(up, file) {
                 // 每個文件上傳前，處理相關(guān)的事情
                 // (上傳文件前做一些處理)
          },
          "UploadProgress": function(up, file) {
                 // 每個文件上傳時，處理相關(guān)的事情
                 // (可以設(shè)置進度條信息)
          },
          "FileUploaded": function(up, file, info) {
                 // 每個文件上傳成功后，處理相關(guān)的事情
                 // 其中info是文件上傳成功后，服務(wù)端返回的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) {
                 //上傳出錯時，處理相關(guān)的事情
          },
          "UploadComplete": function() {
                 //隊列文件處理完畢后，處理相關(guān)的事情
          },
          "Key": function(up, file) {
              // 若想在前端對每個文件的key進行個性化處理，可以配置該函數(shù)
              // 該配置必須要在unique_names: false，save_key: false時才生效

              var key = "";
              // do something with key here
              // (可以自定義key不設(shè)定默認(rèn)是文件名)
              return key
          }
      }
  });

  // domain為七?？臻g對應(yīng)的域名，選擇某個空間后，可通過 空間設(shè)置->基本設(shè)置->域名設(shè)置 查看獲取

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

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

由于本次項目中只涉及到大文件上傳，沒有圖像處理等相關(guān)的api使用經(jīng)驗官方的案例就不多講了?？偨Y(jié)起來七牛云上傳的套路就是后臺為你提供uptoken或者獲取uptoken的接口地址之后上傳的時候要帶上這個token。返回的字段最好是按照官方的格式來，如果不是的話也可以修改源代碼或者在uptoken_func中手動獲取，另外如果要修改上傳的服務(wù)器也是要在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",
        "修改成你需要的地址",
    ];

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

html:
        

            
            
            

            
            

            
            

            
        

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

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

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