vue elementui上传图片限制格式、大小和尺寸方式
作者:Naive_Jam
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
需求
- 上传图片的格式为:.jpg、.jpeg、.png
- 大小为:1M以内
- 尺寸为:400*400
代码实现
直接拿的elementui官网的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: '上传图片的尺寸应为' + E_width + '*' + E_height + ',当前上传图片的尺寸为:' + 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('上传图片大小不能超过 1MB!') return reject(false) } // 调用[限制图片尺寸]函数 this.limitFileWH(400, 400, file).then((res) => { file.isFlag = res if (file.isFlag) { return resolve(true) } else { return reject(false) } }) }) }, // 上传成功的回调 handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); },
上传的图片不符合需求的会提示错误信息,停止上传。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。