elementUI 图片上传限制上传图片的宽高
文件上传,需当上传的文件类型为图片的时候,需要限制图片的宽高。
此处采用了new Promise异步加载的方式,等图片上传加载完成后,
页面代码:
1 <el-form-item label="广告文件" style="width: 98%" v-if="dialogStatus!='view'"> 2 <el-upload 3 class="upload-demo" 4 drag 5 :action=actionURL 6 :data={bizType:10} 7 :limit=1 8 :multiple = false 9 :file-list="fileList" 10 :on-remove="removeFile" 11 :before-upload="beforeUpload" 12 :on-exceed="handleExceed" 13 :on-success = 'handleAvatarSuccess'> 14 <i class="el-icon-upload"></i> 15 <div class="el-upload__text"> 16 <div>将文件拖到此处,或<em>点击上传</em></div> 17 </div> 18 </el-upload> 19 <div class="tipCls" :class="{'fontWeightCls': form.adType==0}">图片:jpg,png,gif,webp,JPEG</div> 20 <div class="tipCls" :class="{'fontWeightCls': form.adType==1}">视频:3gp,mp4,mkv</div> 21 <div class="tipCls" :class="{'fontWeightCls': form.adType==2}">文本:txt</div> 22 <div class="tipCls" :class="{'fontWeightCls': form.adType==3}">声音: mp3,mkv,wav,ogg, 3gp, mp4,m4a,aac, ts,flac</div> 23 </el-form-item>
上传前检查事件:
1 beforeUpload(file){ 2 const fileTypeName = (file.name).substring(file.name.lastIndexOf('.')*1 + 1*1); // 获取后缀名 3 // (0图片,1视频,2文字,3声音) 4 let supportFormat = ['mp3','mkv','wav','ogg','3gp','mp4','m4a','aac','ts','flac', '3gp','mp4','mkv','txt', 'jpg', 'png', 'gif', 'JPEG']; 5 if(this.form.adType === 0){ 6 supportFormat=['jpg', 'png', 'gif', 'JPEG']; 7 } else if(this.form.adType === 1){ 8 supportFormat=['3gp','mp4','mkv']; 9 } else if(this.form.adType === 2){ 10 supportFormat=['txt']; 11 } else if(this.form.adType === 3){ 12 supportFormat =['mp3','mkv','wav','ogg','3gp','mp4','m4a','aac','ts','flac']; 13 } 14 let index = supportFormat.indexOf(fileTypeName); 15 if(index == -1){ // 说明核实不符合 16 this.$message.warning('上传文件的格式不合符,请重新上传!'); 17 return false; 18 } else { 19 20 // 图片文件大小限制,限制宽高分别为1280px和800px 21 if(this.form.adType == 0) { 22 let _this = this; 23 let imgWidth=""; 24 let imgHight=""; 25 const isSize = new Promise(function (resolve, reject) { 26 let width = 1280; 27 let height = 800; 28 let _URL = window.URL || window.webkitURL; 29 let img = new Image(); 30 img.onload = function () { 31 imgWidth = img.width; 32 imgHight = img.height; 33 let valid = img.width == width && img.height == height; 34 valid ? resolve() : reject(); 35 } 36 img.src = _URL.createObjectURL(file); 37 }).then(() => { 38 return file; 39 }, () => { 40 _this.$message.warning({message: '上传文件的图片大小不合符标准,宽需要为1280px,高需要为800px。当前上传图片的宽高分别为:'+imgWidth+'px和'+imgHight+'px', btn: false}) 41 return Promise.reject(); 42 }); 43 console.log(isSize); 44 return isSize; 45 }else { 46 return true; 47 } 48 } 49 },