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"