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

Neilyo 發布于2019-08-26 10:24 / 2530人閱讀

摘要：正文上傳圖片到七牛云這個需要前后端的配合才能實現，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進度值谷歌找到的其一谷歌找到的其二完

前言

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

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

el-upload 自定義上傳方法

圖片上傳到七牛云

圖片壓縮后再上傳（壓縮使用 lrz）

el-upload 進度條不顯示的問題

版本信息：

element-ui 2.3.4

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

正文 上傳圖片到七牛云

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

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

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

利用七牛服務端 SDK?構建后端服務

利用七牛底層 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 函數，具體代碼見上面的例子。

參考鏈接：

upload組件的 http:request 怎么獲取進度值

谷歌 axios upload progress 找到的其一

谷歌 axios upload progress 找到的其二

（完）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106128.html

element-ui+vue-cli3.0：el-upload

摘要：最近項目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個數限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進度條等問題。下面是我對的上傳組件的一些改造，點擊查看源碼。最近項目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個數限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進度條等問題。下面是我對element-u...

yy13818512006 2019-08-23 13:50 評論0 收藏0
window系統下 element----el-upload上傳插件中的accept屬性不生效

摘要：我寫的代碼設置的為類型點擊上傳只能上傳文件，每次最多上傳個，且總容量不可超過在系統里面顯示在系統中顯示最后我在中做了一層判斷，不是文件為我寫的代碼設置的accept為pdf類型點擊上傳只能上傳pdf文件，每次最多上傳10個，且總容量不可超過30M 在mac系統里面顯示showImg(https://segmentfault.com/img/bVbtAlQ);在window系統...

Freelander 2019-08-23 17:59 評論0 收藏0
vue導入處理Excel表格功能步驟實例

　　1. 前言　　本篇文章就是為大家講講前端導入并處理excel表格的情況，順便講講vue導入并處理excel數據；也總結下使用工具。　　2.vue導入Excel表格　　vue導入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；　　2.1 使用ElementUI中的upload組件　　安裝Eleme...

3403771864 2022-11-29 09:16 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0