上傳圖片到七牛雲（客戶端 js sdk）

大體思路

　　上一篇我們講了如何通過服務器生成一個upToken，那前端拿到這個token后又該如何操作？在這里我給出一個相當簡潔的版本。

　　首先我們來看一下上傳的思路：調用七牛模塊的upload方法，生成一個observable對象，observable 可觀察對象，該對象通過 subscribe 訂閱方法可以被 observer觀察者所訂閱，訂閱同時會開始觸發上傳。

　　那upload方法需要些什么參數呢？我們來理一理：

　　　　file: Blob 對象，上傳的文件

　　　　key: 到時候存儲成功的資源名

  　　　  token: 上傳憑證，上篇有講

　　　　config: 上傳配置，一般我只配一個啟用cdn加速

　　　　putExtra: 額外配置，一般我只用來限制一下上傳文件的類型。

 

Blob對象

　　這里着重說一下file，其實它的獲取十分簡單，它通過input type="file"表單DOM的files屬性獲得，files屬性表示當前這次選擇的本地文件對象集合，是一個數組。

　　來直觀感受一下：

　　

　　

 

　　（代碼部分）

　

　　

（選擇三張圖片）

　　

 

　　

（控制台打印結果，這就是blob對象，包含了文件的信息）

 

 

實際操作：

　　回到我們的七牛雲上傳部分，首先，安裝qiniu-js

npm i qiniu-js

　　然后，在需要上傳的模塊引入qiniu-js

import * as qiniu from 'qiniu-js';

　　最后，在文件選擇改變事件觸發時，調用以下方法：

　　

    changeHandler(e) {
      const file = e.target.files[0];
      const key = file.name;
      const token = this.qiniuToken; //從服務器拿的並存在本地data里
      const putExtra = {
        fname: '',
        params: {},
        mimeType: ['image/png', 'image/jpeg', 'image/gif'],
      };
      const config = {
        useCdnDomain: true, //使用cdn加速
      };
      const observable = qiniu.upload(file, key, token, putExtra, config);

      observable.subscribe({
        next: (result) => {
          // 主要用來展示進度
          console.warn(result);
        },
        error: () => {
          this.$notify('上傳圖片失敗');
        },
        complete: (res) => {
          console.log(res.key);
        },
      });
    },

　　如此，便可成功上傳。