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

Posted 2020-12-06 yu412

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

html:

<el-form>
    <el-form-item label="上传图片：" >
      <el-upload
         style="width:654px;hight:270px"
         :before-upload="beforeUpload"
         accept="image/png,image/jpg,image/jpeg"
         class="upload-demo"
         name="file"
         ref="upload"
         drag
         :action="uploadPicture"
         :on-success="uploadImgSuc"
         list-type="picture"
         :file-list="fileList"
         :on-error="uploadImgErr">
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
     </el-upload>
     <span style="color:red">图片尺寸限制为654 x 270，大小不可超过1MB</span>
   </el-form-item>
</el-form>

　　

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

: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"