vue 上传图片判断大小尺寸

Posted 2021-09-10 huahua

uploadImg(e, record, index) {
  const file = e.target.files[0];
  // 判断上传图片的大小 限制
  if (file.size / 1024 < 1000) {
    const that = this;
    let imgWidth = "";
    let imgHight = "";
    // 限制图片的尺寸 为2000*1500
    const isSize = new Promise(function(resolve, reject) {
      const _URL = window.URL || window.webkitURL;
      const img = new Image();
      img.onload = function() {
        imgWidth = img.width;
        imgHight = img.height;
        const valid =
          img.width === parseInt(2000) && img.height === parseInt(1500);
        valid ? resolve() : reject();
      };
      img.src = _URL.createObjectURL(file);
    }).then(
      () => {
        const formData = new FormData();
        formData.append("files", file);
        that.loading = true;
        // 这里是调取接口
        接口名字(formData)
          .then(res => {
              // 接口成功操作啥的
              that.$message.success("图片上传成功");
    
          })
          .finally(() => {
            that.loading = false;
          });
      },
      () => {
        // 图片尺寸不对 提示
        this.$message.info(
          `图片尺寸应为2000x1500,当前图片尺寸为${imgWidth}x${imgHight}`
        );
        return Promise.reject();
      }
    );
  } else {
    this.$message.info("图片最大1000k");
  }
}