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

一切正常，您可以检查下面的小提琴。 https://jsfiddle.net/tyagdvm5/

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

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

Answer 2

这里的$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.js输入文件形式

2 个答案: