使用 Vue.js 将文件输入绑定到按钮答案

【问题标题】：Bind file input to a button using Vue.js使用 Vue.js 将文件输入绑定到按钮
【发布时间】：2016-05-31 01:49:41
【问题描述】：

我正在尝试使用 Vue.js 将输入文件绑定到按钮
具备以下条件：

<input type="file hidden>
<button>Choose</button>

在 JQuery 中会是这样的：

$('button').click(function() {
    $('input[type=file]').click();
});

所以，这样做是将按钮上的点击事件绑定到输入文件，这样我就可以完全控制按钮的外观，它甚至可以是锚点或图像或任何元素来触发输入事件。

我的问题是：我怎样才能使用 Vue.js 完成这个？

谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你可以这样做：

HTML：

<input id="fileUpload" type="file" hidden>
<button @click="chooseFiles()">Choose</button>

Vue.js：

methods: {
    chooseFiles: function() {
        document.getElementById("fileUpload").click()
    },
...

编辑 - 更新语法：

methods: {
    chooseFiles() {
        document.getElementById("fileUpload").click()
    },
...

【讨论】：

使用组件的 $refs 更安全，避免通过 id 查找
@farincz 你能解释一下为什么吗？唯一的区别是将依赖项从元素 id 更改为 ref 属性。我想知道是否还有其他事情。谢谢。
@crabbly 使用 id 仅对单例组件有效。页面上有多个实例的组件需要参考。此外，可重用组件/库不应破坏全局 id 空间（以避免潜在的名称冲突）。
有趣。感谢您的反馈。我相信我们有责任在全局命名空间下不存在具有相同 ID 的多个元素。因此，您描述的问题首先不应该存在。 Refs 是一个不错的选择，特别是在您描述的场景中，但它并不能证明在页面上有重复的元素 id 是合理的。元素 ID 应该是唯一的。

【解决方案2】：

最简单的方法是对标签元素进行样式化，例如按钮，仅限 HTML。

【讨论】：

【解决方案3】：

您可以使用label html 标记来执行此操作，如下所示

<label for="upload-file" class="css-class">
    <input type="file" id="upload-file" hidden @change="choosFile"/>
</label>

这样你就不再需要按钮了，你可以按照自己喜欢的方式自定义带有css的标签

【讨论】：

【解决方案4】：

将ref="file" 添加到您的<input> 元素，然后使用$refs.file 访问它。

<input ref="file" type="file">
<div @click="selectFile()">click to select a file</div>

methods:{
  selectFile(){
    let fileInputElement = this.$refs.file;
    fileInputElement.click();

    // Do something with chosen file 
  }
}

? 演示：https://codepen.io/Jossef/pen/QWEbNGv

【讨论】：

【解决方案5】：

这可能对使用 coreui <CInputFile> 标签的人有所帮助。

<CInputFile>、this.$refs.file.click() 和 this.$refs.file.$el.click() 都不起作用。

因为<CInputFile> 将<div> 包裹在<input type="file"> 周围。所以这里$el其实是一个div元素，你需要像这样去找到<input type="file">标签并触发<input type="file">标签上的click()事件

this.$refs.file.$el.getElementsByTagName('input')[0].click().

【讨论】：

【解决方案6】：

使用 Vue 3 有一种更简单的方法

<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>

使用它，您可以向标签字段添加类和样式。

【讨论】：

【解决方案7】：

在 Vue 中：

以下代码的工作原理：

点击按钮（标签）打开文件资源管理器；
选择一个文件，继续；
@onChange 将检测新文件：

<label>
  <button/> //this can be an icon, link,...
  <input @change="doSomething" type="file" ref="file" accept="image/gif, 
    image/jpeg, image/png" hidden/>
</label>

处理文件

doSomething(e: any) { 
  const file = e.target.files[0]
}

【讨论】：