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