标签:属性 点击 item 格式 style eject ict adp 不可
html:
<el-form> <el-form-item label="上传图片:" > <el-upload style="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 = this const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M const isSize = new Promise(function (resolve, reject) { let width = 654; // 限制图片尺寸为654X270 let 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"
element-ui el-upload限制图片格式尺寸及图片
标签:属性 点击 item 格式 style eject ict adp 不可
原文地址:https://www.cnblogs.com/yu412/p/12986361.html