vue elementui上傳圖片限制格式、大小和尺寸方式
需求
- 上傳圖片的格式為:.jpg、.jpeg、.png
- 大小為:1M以內(nèi)
- 尺寸為:400*400
代碼實(shí)現(xiàn)
直接拿的elementui官網(wǎng)的html代碼,加了一句:
accept="image/jpg,image/jpeg,image/png"
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" accept="image/jpg,image/jpeg,image/png" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
下面是寫在methods里的js代碼:
// 限制圖片尺寸 limitFileWH(E_width, E_height, file) { const _this = this let imgWidth = '' let imgHight = '' const isSize = new Promise(function(resolve, reject) { const width = E_width const height = E_height const _URL = window.URL || window.webkitURL const img = new Image() img.onload = function() { imgWidth = img.width imgHight = img.height const valid = img.width === width && img.height === height valid ? resolve() : reject() } img.src = _URL.createObjectURL(file) }).then(() => { return true }, () => { _this.$message.warning({ message: '上傳圖片的尺寸應(yīng)為' + E_width + '*' + E_height + ',當(dāng)前上傳圖片的尺寸為:' + imgWidth + '*' + imgHight, btn: false }) return false }) return isSize }, // 圖片上傳之前的判斷 handleBeforeUpload(file) { return new Promise((resolve, reject) => { const suffix = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' const isLt1M = file.size / 1024 / 1024 < 1 if (!suffix) { this.$message.error('只能上傳圖片!') return reject(false) } if (!isLt1M) { this.$message.error('上傳圖片大小不能超過(guò) 1MB!') return reject(false) } // 調(diào)用[限制圖片尺寸]函數(shù) this.limitFileWH(400, 400, file).then((res) => { file.isFlag = res if (file.isFlag) { return resolve(true) } else { return reject(false) } }) }) }, // 上傳成功的回調(diào) handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); },
上傳的圖片不符合需求的會(huì)提示錯(cuò)誤信息,停止上傳。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時(shí),用v-model="visible"來(lái)控制時(shí),控件找不到這個(gè)值,才換成trigger="click",需要的朋友可以參考下2024-03-03vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟
這篇文章主要介紹了vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11npm如何更新VUE package.json文件中依賴的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue實(shí)現(xiàn)購(gòu)物車場(chǎng)景下的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車場(chǎng)景下的應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Vue3 appear 失效的問(wèn)題及如何使用 appear
appear 是一個(gè)在元素默認(rèn)被顯示的情況下 調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下 執(zhí)行進(jìn)入動(dòng)畫的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫時(shí)遇到appear無(wú)法生效的問(wèn)題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-10-10vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式
這篇文章主要介紹了vue+echarts動(dòng)態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06