<div >不多于5张图片,600*600px,png、jpg或gif格式,大小不超过2M</div>
<el-upload action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
multiple
:limit="5"
:before-upload="brforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%"
:src="dialogImageUrl"
alt="">
</el-dialog>
brforeUpload(file) {
let bool = true;
let isSize = getImgInfo(file);
isSize.catch(() => {
this.$message({
message: '注意:文件格式为600*600!',
type: 'warning'
});
})
let fileType = ['.png', '.jpg', '.gif'];
let { name, size } = file;
let hzIndex = name.lastIndexOf('.');
let nameLen = name.length;
let hz = name.substring(hzIndex, nameLen);
let imgSize = (parseFloat(size) / 1024 / 1024) > 2;
if (!fileType.includes(hz) || imgSize) {
this.$message({
message: '注意:文件格式不正确!',
type: 'warning'
});
bool = false;
}
return isSize || bool;
}
------>封装的getImgInfo
export const getImgInfo = (file, _width = 100, _height = 100) => {
const isSize = new Promise(function (resolve, reject) {
let width = _width;
let height = _height;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = () => {
let valid = img.width <= width && img.height <= height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
return Promise.reject();
})
return isSize;
}