Vue中使用file类型input标签，无法使用reset方法清空已经选择的文件【简单粗暴的解决方案】

最新推荐文章于 2024-07-24 17:39:56 发布

13东月关

最新推荐文章于 2024-07-24 17:39:56 发布

阅读量1.5k

点赞数 5

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52144300/article/details/124639594

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue和SpringBoot结合的小项目中遇到的文件上传问题，尝试多种常规解决方案无效后，作者提出了一种直接而简单的方法。通过使用Vue的`v-if`和`nextTick`函数，或者setTimeout来实现输入框的动态显示和隐藏，从而达到刷新上传状态的目的。这种方法避免了复杂的逻辑，具有一定的实用性。

摘要由CSDN通过智能技术生成

这是在一个vue+springboot的小项目中遇到的问题，如图：
在这里插入图片描述
看了其他大佬的文章，看到了不少解决方案，但是无济于事，我这里依然报错，我一不做二不休直接提供一个是十分暴力的解决方案

下面这个是两个按钮的 html 内容，不比在意其他内容，重点在input的v-if 上，对只需要这个就能实现，想必各位很多人已经猜到了我的思路了

      <input
        v-if="!item.cancel_img"
        type="file"
        @change="selectImgChange"
        accept="image/jpeg,image/png"
        single
      />
      <el-button type="info" size="small" @click="cancel_upload">
        取消上传
      </el-button>

下面这个是js函数部分的代码，注意了nextTick 函数，在vue2和vue3中用法不太一样，这个可以去搜搜了解一下

	function cancel_upload() {
      item.cancel_img = true;
      //nextTick 函数是在下一次dom更新后回调，
      //这就可以实现先执行的上面的代码，让input[file]节点消失，
      //然后再dom更新后回调该函数，又执行了让input[file]节点显示，这样就实现了刷新
      nextTick(() => {
        item.cancel_img = false;
      });
    }