Vuejs输入文件形式答案

【问题标题】：Vuejs input file formVuejs输入文件形式
【发布时间】：2019-01-31 08:58:03
【问题描述】：

在我的 vue-bootstrap 应用程序中，我想使用隐藏的输入文件控制。当我使用标准输入组件时，它可以工作（加载 1）。如果我尝试对反应组件形式的 vue-bootstrap 库执行相同操作，则它不起作用（加载 2）。我将不胜感激任何提示我可能做错了什么。

app = new Vue({
  el: "#app",
  data: {
    files: '',
  }
})

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
      <input type="file" ref="fileInput1"  style="display:none;"/>
    </div>
    <div>
      <b-button @click="$refs.fileInput2.click()"> Load 2</b-button>
      <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
    </div>
  </div>
</body>
</html>

【问题讨论】：

标签： vue.js input vuejs2 bootstrap-vue

【解决方案1】：

这里的 $refs.fileInput2 指的是 Vue 组件，而不是真正的输入元素，它实际上被包裹在一个 div 中（如果你检查渲染的元素，你可以看到它）。所以你可以做一件事（虽然它很丑也不推荐，但你至少应该把它移到methods 部分）：

app = new Vue({
  el: "#app",

  data: {
    files: '',
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
    <input type="file" ref="fileInput1" style="display:none;" />
  </div>

  <div>
    <b-button @click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
    <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
  </div>
</div>

虽然我会说你应该只使用本机文件输入元素，因为无论如何你都隐藏了<b-form-file/>。

【讨论】：

非常感谢您的回复。如果我决定使用本机文件输入，那么了解对话框何时关闭的规范方法是什么？我想用vue组件加上watch功能。
@JulianK 看看these posts 是否有帮助。或者，查看oncancel 事件处理程序。
非常感谢您的帮助！

【解决方案2】：

它工作正常。你可以检查下面的小提琴。 https://jsfiddle.net/tyagdvm5/

<b-form-file style="display:none;"  v-model="file2" choose-label="Attachment2"></b-form-file>

或者要获得准确的解决方案，请创建一个小提琴并上传链接。

【讨论】：