vue2中input的file上传文件点击无效如何清空input从新上传

六月初六月初 Vue 2024-09-16 11:33:59

前端开发中遇到各类问题是在所难免的，本篇文章就来介绍在vue开发中关于input上传文件时遇到的问题。

input上传文件问题如下：

    使用input的file上传文件。第一次点击可以正常选择需要上传的文件，但第二次开始进行点击上传时，不能正常唤醒选择文件操作。

通过上述描述可以知道，该问题出现在input已存在数据。需要将input中存在的数据清理后，再次上传时即可生效。

那么在vue中要如何清理input中的数据呢？流程如下：

一、vue页面中html部分

  1. <input ref="fileInput" type="file" @change="uploadVideoToCOS" />
Collapse Code

二、vue页面中js部分

  1. export default {
  2.     data() {
  3.         return {
  4.         }
  5.     },
  6.     methods: {
  7.         uploadVideoToCOS(e) {
  8.             this.$refs.fileInput.value = null;
  9.         }
  10.     }
  11. }
Collapse Code

如上方法每次进行文件选择前，先将input中的数据清理。这样多次选择都可以正常选择所需要的文件。

铁子们，抗不住了。点点广告可好，感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！