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"