<el-upload
class="upload-demo"
:action="uploadLi"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:headers="{'X-User-Token': authorization}"
name="file"
accept="image/png,image/jpg,image/jpeg,image/gif"
:multiple=false
:show-file-list=false
>
<div class="avatar" v-if="createForm.advertPic">
<img :src="createForm.advertPic" class="avatar_img">
<span>修改图标</span>
</div>
<el-button size="small" type="primary" style="height:28px;" v-else>上传</el-button>
<div slot="tip" class="el-upload__tip" style="margin-top:0px;">只能上传jpg/png/gif文件 750*1642px,1M以内</div>
</el-upload>
//js 方法:
beforeUpload (file) {
//进行图片类型和大小的限制
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'png'
const extension2 = testmsg === 'jpg'
const extension3 = testmsg === 'jpeg'
const extension4 = testmsg === 'gif'
const isLt2M = file.size / 1024 / 1024 < 1
//const isLt2M = file.size / 1024 <= 500
if(!extension && !extension2 && !extension3 && !extension4) {
this.$message({
message: '展会广告图只能是 png、jpg、jpeg、gif格式!',
type: 'warning'
});
return false;//必须加上return false; 才能阻止
}
if(!isLt2M) {
this.$message({
message:'展会广告图大小不能超过1M!请重新选择!',
type: 'warning'
});
return false;//必须加上return false; 才能阻止
}
const isSize = new Promise(function(resolve, reject){
let width = 750;
let height = 1642;
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({
message:'展会广告图尺寸只能是750*1642px!请重新选择!',
type: 'warning'
});
return Promise.reject()
return false;//必须加上return false; 才能阻止
})
return extension || extension2 || extension3 || extension4 && isLt2M && isSize;
},