ant-design-vue 的upload组件之图片上传前的图片宽高判断

须知知识点：

• FileReader()对象
• Image()对象
• upload组件

有一个需求，需要判断上传的图片的宽高，限制800*800像素大小，用的是ant-design-vue框架。

1.原生的input type="file"判断图片大小的方法如下：

HTML：

<input type="file" id="img">
<h1 id="h1"></h1>

JS：

img.onchange=function(e){
    // e.target.files[0]表示选取的第一个文件
    console.log(e.target.files[0]);
    // FileReader对象将文件读取为dataURL格式
    let reader=new FileReader();
    reader.readAsDataURL(e.target.files[0]),
    // load事件在读取操作结束的时候触发
    reader.onload=()=>{
        const img=new Image();
        // FileReader.result返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
        img.src=reader.result;
        // 如果此时直接获取img的宽高结果是0，只有当图片加载结束以后（load）获取才能获取到
        img.onload=()=>{
            let w=img.width;
            let h=img.height;
            h1.innerHTML=`宽：${w}-高${h}`
        }
    }
}

2.ant-design-vue中使用upload组件中获取图片大小的方式如下：

template：

<a-upload
        accept="image/jpg,image/jpeg,image/png"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        list-type="picture-card"
        :file-list="imgList"
        @preview="handlePreview"
        @change="handleChange"
        :beforeUpload="beforeUpload"
      >
</a-upload>

开始在handleChange方法中判断img文件，它传入的是一个已经选择文件的列表，他的内容如下：

如果直接用这个列表中单个元素来执行上述图片判断，则会报错：

原生js中的input type="file"打印出来e.target.files[0]结构如下：

 这就是读取失败的原因，展开ant-design-vue中的originFileObj属性，发现原生file的内容被放到这里了：

而且再把beforeUpload文件上传前钩子函数中的默认传入的参数file打印出来发现就是原生input type="file"的内容，所以直接在beforeUpload钩子函数中直接判断图片的width和height中即可。

// 上传文件之前的钩子
  beforeUpload(file){
    console.log("beforeUpload中：",file);
    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;
        console.log("宽高：",w,h);
      }
    }
    return false;
  }