vue3+ts上传图片做尺寸、类型、大小限制

上传图片的之前的类型校验其实就是返回true和false，如果返回false则不会上传图片， 所以这里判断条件不符合的话返回false，只有满足三个条件才会上传成功。

 const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
      if (rawFile.type !== "image/png") {
        ElMessage.error("Image must be png");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error("The picture cannot exceed 10M");
        return false;
      }
      console.log("111");
      return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.onload = (event: any) => {
          var txt = event.target.result;
          var img = document.createElement("img");
          img.src = txt;
          img.onload = () => {
            if (img.width != 1284 && img.height != 2788) {
              console.log(img.width, img.height);
              ElMessage.error("Image size must be 1284*2788");
              return resolve(false);
            } else {
              return resolve(true);
            }
          };
        };
        reader.readAsDataURL(rawFile);
      });
    };

这里有一个坑：img.onload里面return false是无法返回的，即使弹窗出现错误还是会继续上传，因为是异步的所以无法返回，这里是使用promise返回false就可以阻止上传。