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

Question

我正在尝试使用Vue.js将输入文件绑定到按钮 有以下内容：

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

在JQuery中会有类似的东西：

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

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

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

谢谢！

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

Answer 2

最简单的方法是将标签元素设置为样式，如按钮，仅限HTML。

Answer 3

在您的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

Answer 4

您可以使用label html标记执行以下操作

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

通过这种方式，您不再需要该按钮，可以使用css自定义标签

Answer 5

使用 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>

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