element-ui el-upload限制图片格式尺寸及图片

news/2025/3/1 8:58:46/

html:

<el-form><el-form-item label="上传图片:" ><el-uploadstyle="width:654px;hight:270px":before-upload="beforeUpload"accept="image/png,image/jpg,image/jpeg"class="upload-demo"name="file"ref="upload"drag:action="uploadPicture":on-success="uploadImgSuc"list-type="picture":file-list="fileList":on-error="uploadImgErr"><i class="el-icon-upload"></i><div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div></el-upload><span style="color:red">图片尺寸限制为654 x 270,大小不可超过1MB</span></el-form-item>
</el-form>

如果要现在图片的尺寸,大小,就在

:before-upload="beforeAvatarUpload"
这个函数里面去定义

js:

 // 图片上传尺寸大小检验beforeUpload (file) {let _this = thisconst is1M = file.size / 1024 / 1024 < 1; // 限制小于1Mconst isSize = new Promise(function (resolve, reject) {let width = 654; // 限制图片尺寸为654X270let height = 270;let _URL = window.URL || window.webkitURL;let img = new Image();img.onload = function () {let valid = img.width === width && img.height === height;valid ? resolve() : reject();}img.src = _URL.createObjectURL(file);}).then(() => {return file;}, () => {_this.$message.error('图片尺寸限制为654 x 270,大小不可超过1MB')return Promise.reject();});if (!is1M) {_this.$message.error('图片尺寸限制为654 x 270,大小不可超过1MB')}return isSize&is1M},

可上传图片的格式, 为HTML代码段中accept属性:accept="image/png,image/jpg,image/jpeg"


http://www.ppmy.cn/news/526505.html

相关文章

HTML实现A4模板

前言 需要使用html实现打印前预览的界面&#xff0c;要求预览结果与打印效果相同 使用环境&#xff1a; bootstrapVue 文章目录 前言一、A4模板效果二、制作A4模板1.思考界面结构&#xff08;以所附demo[A4.html]分析&#xff09;2. 限制页面大小 三、预览功能四、实现打印五、…

vue Ant Design Upload上传本地图片

vue Ant Design Upload上传本地图片&#xff08;点击图片可预览&#xff09; 图片为base64格式&#xff0c;存在imageUrl中 <template> <div><a-uploadname"avatar"listType"picture-card"class"avatar-uploader":showUploadLis…

uniapp - 超详细 H5 网站图片压缩功能,图像上传前进行压缩降低大小并上传到服务器完整示例源码(附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程)

前言 网上的文章代码非常乱,各种无注释及平台不通用的问题,根本无法改造为自己想要的效果。 本文站在小白的角度,从 0-1 详细描述了 uniapp H5 网页平台下,图片上传前 “压缩降低大小” 功能组件,支持自定义降低图片质量参数、图片控制在多大内等等,并提供了压缩完如何上…

实战:构建工具-共享库配置实践-2023.6.22(测试成功)

实战&#xff1a;构建工具-共享库配置实践-2023.6.22(测试成功) 目录 推荐文章 https://www.yuque.com/xyy-onlyone/aevhhf?# 《玩转Typora》 实验环境 gitlab/gitlab-ce:15.0.3-ce.0 jenkins/jenkins:2.346.3-2-lts-jdk11实验软件 链接&#xff1a;https://pan.baidu.com/…

[日常] 面试知识点总结(持续更新)

数据结构和算法:物理结构和逻辑结构1.逻辑结构(集合结构,线性结构,树形结构,图形结构)2.物理结构一般是讲内存,顺序存储结构,链式存储结构浅谈算法中,高斯算法从1加到100,循环的话是100次,高斯的方法只需要一次1.推导大O阶:O(1) O(n) O(n^2) O(logn)1.常数1取代时间所有加法常数…

[Leetcode] 0013. 罗马数字转整数

13. 罗马数字转整数 点击上方&#xff0c;跳转至leetcode 题目描述 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C …

富士施乐Fuji Xerox WorkCentre Pro 420 驱动

富士施乐Fuji Xerox WorkCentre Pro 420 驱动是官方提供的一款一体机(打印、扫描)驱动&#xff0c;本站收集提供高速下载&#xff0c;用于解决一体机与电脑连接不了&#xff0c;无法正常使用的问题&#xff0c;本动适用于&#xff1a;Windows XP / Windows 7 / Windows 8 / Win…

富士施乐Fuji Xerox Phaser 3600 驱动

富士施乐Fuji Xerox Phaser 3600 驱动是官方提供的一款一体机&#xff08;打印/扫描&#xff09;驱动&#xff0c;本站收集提供高速下载&#xff0c;用于解决一体机与电脑连接不了&#xff0c;无法正常使用的问题&#xff0c;本动适用于&#xff1a;Windows XP / Windows 7 / W…