element upload图片上传尺寸限制

图片比例限制

使用的是element的图片上传功能,需要对图片 比例 和 尺寸 进行校验.

封装以下方法.

// imgSize.js
//  图片尺寸限制
const imgSize = (file) => {
  return new Promise((resolve, reject) => {
    let url = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function () {
      // 图片比例校验
      let valid = img.width / img.height === 1.875;
      valid ? resolve() : reject();
    };
    img.src = url.createObjectURL(file);
  }).then(
    () => {
      return file;
    },
    () => {
      return Promise.reject();
    }
  );
}

export default imgSize;

使用

/** 导入封装的方法 **/
import imgSize from "@/utils/imgSize";



methods:{
  // 图片上传之前
  beforeAvatarUpload(file) {
      const isSize = imgSize(file);  // 这里使用,传入file值
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不得超过2MB!");
      }
       if (!isSize) {
        this.$message.error("上传的图片建议比例750:400");
       }
      //  校验不通过则不上传文件
      return isLt2M && isLt2M;
    },
}