50字范文,内容丰富有趣,生活中的好帮手!
50字范文 > 饿了么el-upload上传图片限制图片尺寸 大小 格式

饿了么el-upload上传图片限制图片尺寸 大小 格式

时间:2023-08-15 17:53:55

相关推荐

饿了么el-upload上传图片限制图片尺寸 大小 格式

饿了么中的Upload组件已经提供了限制用户上传的图片格式和大小的例子(https://element.eleme.io/#/zh-CN/component/upload),在此又新加图片的尺寸

<el-uploadclass="avatar-uploader"action="":show-file-list="false":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

主要就是在上传之前做一些判断处理

<script>export default {data() {return {imageUrl: ''};},methods: {// 文件上传之前做处理beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;// 图片格式if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');return false;}// 图片大小if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');return false;}// 图片尺寸let imgWidth="";let imgHight="";const isSize = new Promise(function (resolve, reject) {const _URL = window.URL || window.webkitURL;const img = new Image();img.onLoad = function () {imgWidth = img.width;imgHight = img.height;const status = img.width === 240 && img.height === 240;status ? resolve() : reject();}img.src = _URL.createObjectURL(file);}).then(()=>{this.uploadImg(file); // 调用后台接口上传图片的方法}).catch(()=>{this.$message.warning({message: '上传文件的图片大小不合符标准,尺寸为240×240。当前上传图片的尺寸为:'+imgWidth+'×'+imgHight})})},async uploadImg(file) {const result = await equityManagementModels.getImageUrl(file);this.imageUrl = result;},}}</script>

上述方案是使用自动上传,利用上传之前的函数做判断;

此外还可以使用手动上传的方式,即auto-upload属性设置为false,利用on-change事件来判断

<el-uploadclass="avatar-uploader"action="":auto-upload="false":on-change="handleChange"></el-upload>

判断的js和之前基本相同 只有一个参数需要变化

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。