ELEMENT 的upload组件做图片上传尺寸校验

最新推荐文章于 2024-02-22 08:30:00 发布

深巷漫步

最新推荐文章于 2024-02-22 08:30:00 发布

阅读量991

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 平日开发问题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/luckybigboy/article/details/127891564

本文介绍如何在前端使用ELEMENT的upload组件进行图片上传时，利用Promise解决因图片加载onload异步问题，实现图片尺寸校验。通过返回值判断校验结果，确保图片符合上传要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、废话不多说，直接上代码。

校验方法：

checkImg(file) {
    const isSize = new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = () => {
          const valid = img.width === this.imgW && img.height === this.imgH;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
       }).then(
        () => {
          this.$emit("beforeUpload", file);
          return file;
        },
        () => {
          this.msgError(`图片尺寸大小必须为${this.imgW}*${this.imgH}`);   //  我这里是将upload组件进一步封装了， imgW, imgH是图片限制的条件参数
          return Promise.reject(false);
        }
      );
    return isSize;
  },