資訊專欄INFORMATION COLUMN
摘要：正文上傳圖片到七牛云這個需要前后端的配合才能實現(xiàn)，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進度值谷歌找到的其一谷歌找到的其二完
前言
最近在做后臺管理項目，采用的 vue-element-admin ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結(jié)。
初步總結(jié)下會提到的問題，目錄如下：
el-upload 自定義上傳方法
圖片上傳到七牛云
圖片壓縮后再上傳（壓縮使用 lrz）
el-upload 進度條不顯示的問題
版本信息：
element-ui 2.3.4
vue 2.5.10
提示：
由于每個人做的業(yè)務(wù)不盡相同，所以文章里的代碼只是起一個引導作用，提供一個思路，具體可以根據(jù)自己的需求來調(diào)整。
這個需要前后端的配合才能實現(xiàn)，這里 是官方的 JavaScript SDK 參考鏈接。
在使用 JS-SDK 之前，您必須先注冊一個七牛帳號，并登錄控制臺獲取一對有效的?AccessKey?和?SecretKey，您可以閱讀?快速入門?和?安全機制?以進一步了解如何正確使用和管理密鑰 。
JS-SDK 依賴服務(wù)端頒發(fā)?token，可以通過以下二種方式實現(xiàn)：
利用七牛服務(wù)端 SDK?構(gòu)建后端服務(wù)
利用七牛底層 API 構(gòu)建服務(wù)，詳見七牛上傳策略和上傳憑證
前端通過接口請求以獲得?token?信息
前端需要去拿到后端生成的 token 才可以上傳圖片。
自定義上傳，上傳前可壓縮http-request 屬性可以覆蓋默認的上傳行為，自定義上傳的實現(xiàn)。
主要來看一下這個自定義的函數(shù)的代碼實現(xiàn)：
// 自定義的上傳實現(xiàn)函數(shù)
handleHttpRequest(req) {
// uid 作為唯一標識，方便上傳完成后精準地替換圖片 url
const uid = req.file.uid
// 獲取文件后綴名的函數(shù)
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
// 創(chuàng)建form對象，上傳七牛云所需要的參數(shù)
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 是請求發(fā)送的內(nèi)容，config 是 http 的相關(guān)配置
// 官方的請求地址可以查看這個鏈接：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)
})
}
壓縮圖片
這里直接采用前人造的輪子，可以設(shè)置壓縮比例和圖片的尺寸限制。
想看更多細節(jié)的話地址在 這里 ，上面代碼里也有用到，但是這個輪子作者已經(jīng)不再維護了。
el-upload 進度條不顯示使用自定義上傳后，我發(fā)現(xiàn) el-upload 自帶的進度條顯示失效了，這個問題查找了比較久，一開始一直不知道應該在哪里去監(jiān)聽 progress 事件。
參考鏈接里的順序就是我思考的順序。
先是去查了下官方的 issue ，意識到是監(jiān)聽 process 的問題，然后就想 axios 是不是有相關(guān)的設(shè)置呢？畢竟我這里是用 axios 發(fā)請求的，所以又谷歌直接搜關(guān)鍵詞「axios upload progress」，找到了一些相關(guān)的信息，就是在 config 里去配置 onUploadProgress 函數(shù)，具體代碼見上面的例子。
參考鏈接：
upload組件的 http:request 怎么獲取進度值
谷歌 axios upload progress 找到的 其一
谷歌 axios upload progress 找到的 其二
（完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106128.html
摘要：最近項目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個數(shù)限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進度條等問題。下面是我對的上傳組件的一些改造，點擊查看源碼。 最近項目中涉及很多文件上傳的地方，然后文件上傳又有很多限制。比如文件大小限制，文件個數(shù)限制，文件類型限制，文件上傳后的列表樣式自定義，包括上傳進度條等問題。下面是我對element-u...
摘要：我寫的代碼設(shè)置的為類型點擊上傳只能上傳文件，每次最多上傳個，且總?cè)萘坎豢沙^在系統(tǒng)里面顯示在系統(tǒng)中顯示最后我在中做了一層判斷，不是文件為 我寫的代碼設(shè)置的accept為pdf類型 點擊上傳 只能上傳pdf文件，每次最多上傳10個，且總?cè)萘坎豢沙^30M 在mac系統(tǒng)里面顯示showImg(https://segmentfault.com/img/bVbtAlQ);在window系統(tǒng)...
1. 前言 本篇文章就是為大家講講前端導入并處理excel表格的情況，順便講講vue導入并處理excel數(shù)據(jù)；也總結(jié)下使用工具。 2.vue導入Excel表格 vue導入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹； 2.1 使用ElementUI中的upload組件 安裝Eleme...
摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權(quán)計算得到渲染結(jié)果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結(jié)構(gòu)里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數(shù)是需要自適應占滿父元素，超出滾動固定表頭的...
閱讀 3486·2021-10-13 09:39
閱讀 1468·2021-10-08 10:05
閱讀 2272·2021-09-26 09:56
閱讀 2288·2021-09-03 10:28
閱讀 2687·2019-08-29 18:37
閱讀 2046·2019-08-29 17:07
閱讀 609·2019-08-29 16:23
閱讀 2200·2019-08-29 11:24
