VueJS：从按钮触发输入文件

Question

我需要构建一个自定义文件上传器来上传图片配置文件，但我不想使用输入文件的原始设计，而是隐藏它并只显示一个按钮来上传图片。

我知道当用jQuery和AngularJS点击不同的按钮时如何触发输入文件但是我找不到用VueJS做同样的方法，你有什么想法吗？

亲切的问候！

Answer 1

Vue风格

这可能更容易

<input type="file" ref="file" style="display: none">
<button @click="$refs.file.click()">open file dialog</button>

Answer 2

这是一个快速，简单和肮脏的解决方案，但它适用于我。创建常规HTML文件输入，使用CSS或VueJS隐藏它。将v-on:change事件添加到隐藏文件输入。

<input id="fileInput" type="file" style="display:none" v-on:change="yourVueMethod()"/>

创建一个按钮，触发输入字段的click事件。

<button id="fileInputButton" onclick="document.getElementById('fileInput').click()">Open File</button>

现在你可以在你的方法中做任何你想做的事情。可能不是最好的解决方案，但很容易做到。