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>

现在,您可以像通常一样在您的方法中执行任何操作.可能不是最好的解决方案,但很容易做到.