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

Question

我正在尝试使用 Vue.js 将输入文件绑定到按钮

具备以下条件：

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

在 JQuery 中会是这样的：

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

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

我的问题是：如何使用 Vue.js 完成此操作？

谢谢！

原文由 Roberto Murguia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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()
    },
...

原文由 crabbly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将 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

原文由 Jossef Harush Kadouri 发布，翻译遵循 CC BY-SA 4.0 许可协议