vue+elementui el-upload 图片类型，大小，尺寸限制

1.在el-upload控件中加入方法:

1.  
    
2.  
   //accept="image/*" 进行图片类型的限制
3.  
   <el-upload ref="refUpload" :action="upload()" accept="image/*" :show-file-list="false" :on-success="fileSuccess" :on-progress="fileProgress">
4.  
   <img v-if="ruleForm.previewAddressUrl":src="ruleForm.previewAddressUrl" class="avatar">
5.  
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
6.  
   </el-upload>

2.在api文件引用接口

1.  
   export function UploadViewIma() {
2.  
   return //接口地址
3.  
   }

3.在方法中处理:

1.  
   import { UploadViewIma } from "接口所在地址"
2.  
   <script>
3.  
   data() {
4.  
   return {
5.  
   ruleForm:{
6.  
   previewAddressUrl:""
7.  
   }
8.  
   }
9.  
   },
10.  
    methods: {
11.  
    //返回上传地址
12.  
    upload() {
13.  
    return UploadViewIma();
14.  
    },
15.  
    //图片格式校验
16.  
    fileProgress(event, file, fileList) {
17.  
    let isImage = file.raw.type.includes("image");
18.  
    if (!isImage) {// 检查文件类型
19.  
    this.$message.error("预览图须是图片类型!");
20.  
    this.$refs.refUpload.abort();
21.  
    }
22.  
    let fileSize = parseInt(file.size / 1024) <= 500;
23.  
    if (!fileSize) {// 检查文件大小
24.  
    this.$message.error(`预览图大小不能超过500kB! 请重新上传`);
25.  
    this.$refs.refUpload.abort();
26.  
    }
27.  
    if (isImage == true && fileSize == true) {
28.  
    new Promise((resolve, reject) => {
29.  
    const img = new Image();
30.  
    img.src = window.URL.createObjectURL(file.raw);
31.  
    img.onload = () => {
32.  
    if (img.width > 368 && img.height > 228) {
33.  
    // 处理尺寸超过限制的情况 这里是建议所以只是提示，依然是通过的
34.  
    this.$message('建议上传图片为 368 X 224');
35.  
    resolve();
36.  
    } else {
37.  
    // 尺寸符合要求，可以继续上传
38.  
    resolve();
39.  
    }
40.  
    };
41.  
    });
42.  
    }
43.  
    },
44.  
    //图片回显
45.  
    fileSuccess(res, file, fileList) {
46.  
    this.ruleForm.previewAddressUrl = res.data;
47.  
    },
48.  
    }
49.  
    </script>

这篇好文章是转载于：学新通技术网