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"