您可以执行以下操作：
于飞：

<input id="fileUpload" type="file" hidden>
<button @click="chooseFiles()">Choose</button>

Vue.js:

methods: {
    chooseFiles: function() {
        document.getElementById("fileUpload").click()
    },
...

EDIT -更新语法：

methods: {
    chooseFiles() {
        document.getElementById("fileUpload").click()
    },
...

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

将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

您可以使用label html标记来执行此操作，如下所示

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

这样你就不再需要这个按钮了，你可以用css来定制你喜欢的标签

在Vue中：
下面的代码是如何工作的：
1.打开文件资源管理器上的按钮（标签）点击;
1.选择一个文件，继续;
1.@onChange将检测新文件：

<label>
  <button/> //this can be an icon, link,...
  <input @change="doSomething" type="file" ref="file" accept="image/gif, 
    image/jpeg, image/png" hidden/>
</label>

1.处理文件

doSomething(e: any) { 
  const file = e.target.files[0]
}

使用Vue3有一种更简单的方法来实现这一点

<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>

使用此选项，您可以将类别和型式设定加入至标示字段。

这可能对使用coreui <CInputFile>标记的用户有所帮助。
对于<CInputFile>，this.$refs.file.click()和this.$refs.file.$el.click()都不起作用。
因为<CInputFile>将<div> Package 在<input type="file">周围，所以$el实际上是一个div元素，您需要找到<input type="file">标记并在<input type="file">标记上触发click（）事件，如下所示
this.$refs.file.$el.getElementsByTagName('input')[0].click() .

第一个