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

将 a 添加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 2

你可以这样做:

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 3

您可以使用labelhtml 标签来执行此操作，如下所示

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

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

Answer 4

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