element-ui el-upload限制图片格式尺寸及图片

html:


    
      
         
         
将图片拖到此处,或点击上传
图片尺寸限制为654 x 270,大小不可超过1MB

如果要现在图片的尺寸,大小,就在

:before-upload="beforeAvatarUpload"
这个函数里面去定义

js:

 // 图片上传尺寸大小检验
      beforeUpload (file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
        const isSize = new Promise(function (resolve, reject) {
          let width = 654; // 限制图片尺寸为654X270
          let height = 270;
          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.error('图片尺寸限制为654 x 270,大小不可超过1MB')
          return Promise.reject();
        });
        if (!is1M) {
          _this.$message.error('图片尺寸限制为654 x 270,大小不可超过1MB')
        }
        return isSize&is1M
      },

可上传图片的格式, 为HTML代码段中accept属性:accept="image/png,image/jpg,image/jpeg"

你可能感兴趣的:(element-ui,vue)