Vuejs 输入文件表单

Question

在我的 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>

Answer 1

它正在运行 fine.You 可以检查下面的内容 fiddle。 https://jsfiddle.net/tyagdvm5/

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

或者为了获得准确的解决方案，请创建一个 fiddle 并上传 link。

Answer 2

这里的 $refs.fileInput2 指的是 Vue 组件，而不是真正的 input 元素，它实际上被包裹在 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/>。

Vuejs 输入文件表单

Vuejs input file form

input

vue.js

vuejs2

bootstrap-vue