关于 Ant框架中 <a-upload> beforeUpload 获取图片的宽高以及返回false 还能上传的问题

简单粗暴直接上代码

      beforeUpload: function(file) {
    
    

        return new Promise((resolve, reject) => {
    
    
          const isJpgOrPng = file.type === 'image/jpeg'  //这里获取上传文件的类型
          if (!isJpgOrPng) {
    
    
            this.$message.warning('请上传jpg图片')
            return reject(false);  //如有问题那咱们通过reject 函数传一个false阻止他的上传
          }

          if (isJpgOrPng) {
    
    
            let reader = new FileReader(); //这个是通过原生的方式来获取图片的宽高
            reader.readAsDataURL(file);
            reader.onload = () => {
    
    
              const image = new Image();
              image.src = reader.result;
              image.onload = () => {
    
    
                let w = image.width;
                let h = image.height;
                if (w != 358 && h != 441) {
    
    
                  this.$message.warning('请上传358*441的图片')
                  return reject(false);  // //如有问题那咱们通过reject 函数传一个false阻止他的上传
                }else {
    
    
                  return resolve(true) //如没有问题了那咱们就通过resolve函数添加一个true 让文件上传
                }
              }
            }
          }
        });
      }

管哇嘎在这里插入图片描述
官网是这么说的 咱们也不懂反正按照规则来就行返回一个new Promise支持异步处理函数

着重注意一下resolve(上传使用的传递true)和reject(阻止上传的 传递false

猜你喜欢

转载自blog.csdn.net/weixin_44647098/article/details/114836752