使用 Vue.js 将文件输入绑定到按钮 [英] Bind file input to a button using Vue.js

问题描述

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

I'm trying to bind a input file to a button using Vue.js
Having the following:

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

在 JQuery 中将类似于:

In JQuery would be somthing like:

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

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

So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.

我的问题是:如何使用 Vue.js 完成此任务?

My question is: How can I accomplish this using Vue.js?

谢谢！

推荐答案

您可以这样做:

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

这篇关于使用 Vue.js 将文件输入绑定到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！