vue element-ui 组件上传图片 以及对 图片的 宽高 和 大小 格式等 做出限制

vue  文件： 自行引用 elemen-ui 

 

　　　　<el-upload

                        action=" 让后端给你上传地址 "

                        list-type="picture-card"

                        accept="image/*"

                        :limit="1"

                        :file-list="productImgs"

                        :multiple="isMultiple"

                        :on-preview="handlePictureCardPreview"

                        :on-remove="handleRemove"

                        :on-success="handleAvatarSuccess"

                        :before-upload="beforeAvatarUpload"

                        :on-exceed="handleExceed"

                        :on-error="imgUploadError">

                        <i class="el-icon-plus"></i>

                    </el-upload>

                    <el-dialog :visible.sync="dialogVisible">

                        <img width="100%" :src="data:image" alt="">

                    </el-dialog>

 

data：

 

image: '',

            dialogVisible: false,

            productImgs: [],

            isMultiple: true,

 

 

methods: 

handleRemove(file, fileList) {//移除图片

            this.$message.success("删除图片成功")

        },

        handlePictureCardPreview(file) {//预览图片时调用

            this.image = file.url;

            this.dialogVisible = true;

        },

        

        beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制

            const isLt2M = file.size / 1024 / 1024 < 2;

 

　　　　//格式限制　　　　

　　　　var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)

                const extension = testmsg === 'png'

                const extension2 = testmsg === 'jpg'

                

                if(!extension && !extension2) {

                    this.$message({

                        message: 'icon 图只能是 png / jpg 格式!',

                        type: 'warning'

                    });

                    return false;//必须加上return false; 才能阻止

                }

 

　　

　　　　// 大小限制

            if (!isLt2M) {

            this.$message.error('上传图片大小不能超过 2MB!');

            }

 

　　　　// 宽高限制

　　　　const isSize = new Promise(function(resolve, reject){

                    let width = 400;

                    let height = 400;

                    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:'icon图尺寸只能是400*400px!请重新选择!',

                        type: 'warning'

                    });

                    return Promise.reject()

                    return false;//必须加上return false; 才能阻止

                })

 

            return jp&& isLt2M && isSize;

        },

        handleAvatarSuccess(res, file) {//图片上传成功

            console.log(res);

            console.log(file);

            this.imageUrl = URL.createObjectURL(file.raw);

        },

        handleExceed(files, fileList) {//图片上传超过数量限制

            this.$message.error('上传图片不能超过6张!');

        },

        imgUploadError(err, file, fileList){//图片上传失败调用

            this.$message.error('上传图片失败!');

        }