h5 input type=file 文件上传取消事件

最新推荐文章于 2024-07-12 09:12:08 发布

菜菜Caro

最新推荐文章于 2024-07-12 09:12:08 发布

阅读量1.6k

点赞数

分类专栏：遇到的坑文章标签： html5

本文链接：https://blog.csdn.net/Caroline_cai/article/details/117982925

版权

遇到的坑专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用input上传图片时，发现change事件在第一次点击的时候是执行的，但是第二次第三次事件就失灵了，并且报错。
Error in v-on handler: “TypeError: Cannot read property ‘type’ of undefined”
Error in v-on handler: “TypeError: Cannot read property ‘size’ of undefined”
在这里插入图片描述

当点击右上角取消时，会出现以上的报错
在这里插入图片描述
解决方法：判断files.length

<input ref ="leftFile" id="upload" type="file" @change="getFile($event)" accept="image/*" style="display:none">

// 图片上传
getFile(e){
  let filesList = document.querySelector('#upload').files;
  if(filesList.length==0){  //如果取消上传，则改文件的长度为0
    return;
  }else{
  	//在这里面进行文件上传
  }
},