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：
hange=function(e){
2// e.target.files[0]表⽰选取的第⼀个⽂件
3    console.log(e.target.files[0]);
4// FileReader对象将⽂件读取为dataURL格式
5    let reader=new FileReader();
6    adAsDataURL(e.target.files[0]),
7// load事件在读取操作结束的时候触发
8    load=()=>{
9        const img=new Image();
10// sult返回⽂件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使⽤哪种读取⽅法来执⾏读取操作的。
11        img.sult;
12// 如果此时直接获取img的宽⾼结果是0，只有当图⽚加载结束以后（load）获取才能获取到
13        load=()=>{
14            let w=img.width;
15            let h=img.height;
16            h1.innerHTML=`宽：${w}-⾼${h}`
17        }
18    }
19 }
2.ant-design-vue中使⽤upload组件中获取图⽚⼤⼩的⽅式如下：
template：
<a-upload
accept="image/jpg,image/jpeg,image/png"
action="ky.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的内容被放到这⾥了：
antdesignvue 配置外部文件⽽且再把beforeUpload⽂件上传前钩⼦函数中的默认传⼊的参数file打印出来发现就是原⽣input type="file"的内容，所以直接在beforeUpload钩⼦函数中直接判断图⽚的width和height中即可。
1// 上传⽂件之前的钩⼦
2  beforeUpload(file){
3    console.log("beforeUpload中：",file);
4    let reader = new FileReader();
5    adAsDataURL(file);
6    load=()=>{
7      const image=new Image();
8      image.sult;
9      load=()=>{
10        let w=image.width;
11        let h=image.height;
12        console.log("宽⾼：",w,h);
13      }
14    }
15return false;
16  }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。