<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; },