Vue文件上傳七牛雲

今天公司寫項目要把vue的文件上傳七牛雲不經過后端了，提升了一定的效率，我就把我測試的代碼放入博客

以供以后使用

首先

我們在vue里面安裝一下

npm install qiniu-js

然后哪個頁面用到在哪個頁面導入

var qiniu = require('qiniu-js')

 

我們看文檔里的代碼（這個是生成token 我是后端生成的） 后端我用的是python里的Django框架

from qiniu import Auth
#需要填寫你的 Access Key 和 Secret Key
access_key = '自己填'
secret_key = '自己填'
#構建鑒權對象
q = Auth(access_key, secret_key)
#要上傳的空間
bucket_name = '七牛雲空間名稱'
#生成上傳 Token，可以指定過期時間等
#3600為token過期時間，秒為單位。3600等於一小時
token = q.upload_token(bucket_name, key, 3600, policy)
print(token)

生成token后我們拿着token來到vue里面搞事情

uploadFile(){
        let _this = this;//下方用到的參數
        var config = {
          useCdnDomain: true,
          region: null
        };
        var putExtra = {
          fname: "",
          params: {},
          mimeType: null
        };
        var observable = qiniu.upload(_this.file, 'kongjjjjjj', _this.token, putExtra, config)

        var observer = {
          next(res){
            console.log(res.total.percent,'123')
          },
          error(err){
            console.log(err,'456')
          },
          complete(res){
            console.log(res,'789')
          }
        }
        var subscription = observable.subscribe(observer) // 上傳開始  
      }

observer: observer 為一個 object，用來設置上傳過程的監聽函數，有三個屬性 next、error、complete

• next: 接收上傳進度信息，res 參數是一個帶有 total 字段的 object，包含loaded、total、percent三個屬性，提供上傳進度信息。

  • total.loaded: number，已上傳大小，單位為字節。
  • total.total: number，本次上傳的總量控制信息，單位為字節，注意這里的 total 跟文件大小並不一致。
  • total.percent: number，當前上傳進度，范圍：0～100。

• error: 上傳錯誤后觸發，當不是 xhr 請求錯誤時，會把當前錯誤產生原因直接拋出，諸如 JSON 解析異常等；當產生 xhr 請求錯誤時，參數 err 為一個包含 code、message、isRequestError 三個屬性的 object：

  • err.isRequestError: 用於區分是否 xhr 請求錯誤；當 xhr 請求出現錯誤並且后端通過 HTTP 狀態碼返回了錯誤信息時，該參數為 true；否則為 undefined 。
  • err.reqId: string，xhr請求錯誤的 X-Reqid。
  • err.code: number，請求錯誤狀態碼，只有在 err.isRequestError 為 true 的時候才有效，
  • err.message: string，錯誤信息，包含錯誤碼，當后端返回提示信息時也會有相應的錯誤信息。

• complete: 接收上傳完成后的后端返回信息，res 參數為一個 object， 為上傳成功后后端返回的信息，具體返回結構取決於后端sdk的配置

• file: Blob 對象，上傳的文件

• key: 文件資源名
• token: 上傳驗證信息，前端通過接口請求后端獲得

• config: object

  • config.useCdnDomain: 表示是否使用 cdn 加速域名，為布爾值，true 表示使用，默認為 false。
  • config.disableStatisticsReport: 是否禁用日志報告，為布爾值，默認為false。
  • config.region: 選擇上傳域名區域；當為 null 或 undefined 時，自動分析上傳域名區域
  • config.retryCount: 上傳自動重試次數（整體重試次數，而不是某個分片的重試次數）；默認 3 次（即上傳失敗后最多重試兩次）；目前僅在上傳過程中產生 599 內部錯誤時生效，但是未來很可能會擴展為支持更多的情況。
  • config.concurrentRequestLimit: 分片上傳的並發請求量，number，默認為3；因為瀏覽器本身也會限制最大並發量，所以最大並發量與瀏覽器有關。
  • config.checkByMD5: 是否開啟 MD5 校驗，為布爾值；在斷點續傳時，開啟 MD5 校驗會將已上傳的分片與當前分片進行 MD5 值比對，若不一致，則重傳該分片，避免使用錯誤的分片。讀取分片內容並計算 MD5 需要花費一定的時間，因此會稍微增加斷點續傳時的耗時，默認為 false，不開啟。
• putExtra:
  • • fname: string，文件原文件名
    • params: object，用來放置自定義變量
    • mimeType: null || array，用來限定上傳文件類型，指定null時自動判斷文件類型。
      ["image/png", "image/jpeg", "image/gif"]