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

转载于:https://www.cnblogs.com/luoxuemei/p/10856421.html