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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM