element 上傳組件 el-upload 的經驗總結

前言

最近在做后台管理項目，采用的 vue-element-admin ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結。

初步總結下會提到的問題，目錄如下：

1. el-upload 自定義上傳方法
2. 圖片上傳到七牛雲
3. 圖片壓縮后再上傳（壓縮使用 lrz）
4. el-upload 進度條不顯示的問題

版本信息：

• element-ui 2.3.4
• vue 2.5.10

提示：
由於每個人做的業務不盡相同，所以文章里的代碼只是起一個引導作用，提供一個思路，具體可以根據自己的需求來調整。

正文

上傳圖片到七牛雲

這個需要前后端的配合才能實現，這里 是官方的 JavaScript SDK 參考鏈接。

• 在使用 JS-SDK 之前，您必須先注冊一個七牛帳號，並登錄控制台獲取一對有效的 AccessKey 和 SecretKey，您可以閱讀 快速入門 和 安全機制 以進一步了解如何正確使用和管理密鑰 。

• JS-SDK 依賴服務端頒發 token，可以通過以下二種方式實現：

  1. 利用七牛服務端 SDK 構建后端服務
  2. 利用七牛底層 API 構建服務，詳見七牛上傳策略和上傳憑證

前端通過接口請求以獲得 token 信息

前端需要去拿到后端生成的 token 才可以上傳圖片。

自定義上傳，上傳前可壓縮

http-request 屬性可以覆蓋默認的上傳行為，自定義上傳的實現。
主要來看一下這個自定義的函數的代碼實現：

// 自定義的上傳實現函數
handleHttpRequest(req) {
  // uid 作為唯一標識，方便上傳完成后精准地替換圖片 url
  const uid = req.file.uid 
  // 獲取文件后綴名的函數
  const ext = getFileExt(req.file.name) 
  // 自定義 key ，上傳時對圖片的重命名會用到
  let keyname = this.$formatDate(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * 1000) + '.' + ext
  // 壓縮圖片
  let newFile = null
  lrz(req.file, {
    quality: 0.7
  }).then(rst => {
    // 壓縮完成
    newFile = rst.file
    // 創建form對象，上傳七牛雲所需要的參數
    const fileData = new FormData() 
    fileData.append('file', newFile)
    fileData.append('token', this.token)
    fileData.append('key', keyname)
    const config = {
      headers: { 'Content-Type': 'multipart/form-data' },
      // 這一段代碼解決進度條不顯示的問題，屬於 axios 的使用知識。具體可以看文末的參考鏈接。
      onUploadProgress: progressEvent => {
       const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
       req.onProgress({ percent: percentCompleted })
     }
    }
    // 請求七牛雲的接口，具體看自己怎么配置
    // 這里的 action 是請求地址，fileData 是請求發送的內容，config 是 http 的相關配置
    // 官方的請求地址可以查看這個鏈接：https://developer.qiniu.com/kodo/manual/1671/region-endpoint
    axios.post($config[this.bucket].action, fileData, config).then(res => {
      const url = `${$config[this.bucket].domain}/${res.data.key}`
      // 修改 url
      this.fileList.forEach((item) => {
        if (item.uid === uid) {
          item.url = url
        }
      })
      req.onSuccess(res)
    }).catch(err => {
      req.onError(err)
    })
  }).catch(err => {
    console.log(err)
  })
}

壓縮圖片

這里直接采用前人造的輪子，可以設置壓縮比例和圖片的尺寸限制。

想看更多細節的話地址在 這里 ，上面代碼里也有用到，但是這個輪子作者已經不再維護了。

el-upload 進度條不顯示

使用自定義上傳后，我發現 el-upload 自帶的進度條顯示失效了，這個問題查找了比較久，一開始一直不知道應該在哪里去監聽 progress 事件。

參考鏈接里的順序就是我思考的順序。

先是去查了下官方的 issue ，意識到是監聽 process 的問題，然后就想 axios 是不是有相關的設置呢？畢竟我這里是用 axios 發請求的，所以又谷歌直接搜關鍵詞「axios upload progress」，找到了一些相關的信息，就是在 config 里去配置 onUploadProgress 函數，具體代碼見上面的例子。

參考鏈接：

1. upload組件的 http:request 怎么獲取進度值
2. 谷歌 axios upload progress 找到的 其一
3. 谷歌 axios upload progress 找到的 其二

（完）