前言 最近在做後臺管理項目，採用的 "vue element admin" ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結。 初步總結下會提到的問題，目錄如下： 1. el upload 自定義上傳方法 2. 圖片上傳到七牛雲 3. 圖片壓縮後再上傳（壓縮使用 "lrz" ） ...
前言
最近在做後臺管理項目，採用的 vue-element-admin ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結。
初步總結下會提到的問題，目錄如下：
- el-upload 自定義上傳方法
- 圖片上傳到七牛雲
- 圖片壓縮後再上傳（壓縮使用 lrz）
- el-upload 進度條不顯示的問題
版本信息：
- element-ui 2.3.4
- vue 2.5.10
提示：
由於每個人做的業務不盡相同，所以文章里的代碼只是起一個引導作用，提供一個思路，具體可以根據自己的需求來調整。
正文
上傳圖片到七牛雲
這個需要前後端的配合才能實現，這裡 是官方的 JavaScript SDK 參考鏈接。
在使用 JS-SDK 之前，您必須先註冊一個七牛帳號，並登錄控制台獲取一對有效的
AccessKey和SecretKey，您可以閱讀 快速入門 和 安全機制 以進一步瞭解如何正確使用和管理密鑰 。- JS-SDK 依賴服務端頒發
token，可以通過以下二種方式實現：前端通過介面請求以獲得
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 函數，具體代碼見上面的例子。
參考鏈接：
（完）
