element el-upload 上传图片限制图片尺寸（px）?

Question

element el-upload 上传图片限制图片尺寸（px）?

Answer 1

通过Image对象，异步获取图片尺寸

// url 是base64
let url = "";

function getImageSize(url) {
    return new Promise(function (resolve, reject) {
        let image = new Image();
        image.onload = function () {
            resolve({
                width: image.width,
                height: image.height
            });
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}

(async () => {
    let size = await getImageSize(url);
    console.log(size);
})();

转Base64
这个里面有些代码是我项目里面写的, 要删除一下

uploadImg(el) {
      this.file = el.target.files[0];
      const type = this.file.type.split('/')[0];
      if (type === 'image') {
        this.drawer = false;//关闭抽屉
        const size = this.file.size / 1024 / 1024;
        if (size > 5) {
          this.$notify.warning({
            title: "警告",
            message: `图片大小不得超过5M`,
          });
          return
        }
        this.isLoading = true;
        // 将图片img转化为base64
        const reader = new FileReader();
        reader.readAsDataURL(this.file);
        const that = this;
        reader.onloadend = function () {
          const dataURL = reader.result;
          const blob = that.dataURItoBlob(dataURL);
          that.upload(blob); // 执行上传接口
        };
      } else {
        alert('上传了非图片');
      }
    }

Answer 2

一般是限制文件大小吧，图片在页面的尺寸可以自定义，一个分辨率很高也可以在页面中显示的尺寸很小。