在 Vuejs 问题中使用按钮输入文件

Posted 2023-02-22

【中文标题】在 Vuejs 问题中使用按钮输入文件

【英文标题】：Using button for input file in Vuejs issue

【发布时间】：2020-11-19 06:16:52

【问题描述】：

我正在尝试使用一个按钮来触发输入文件。但是我在这里面临的问题是，每当我单击按钮时，它都会将我带到 http://localhost:3000/availability?vue-file-input= url 而不是打开文件选择器。请帮我找出哪里出错了。

<div class="vue-file-wrapper">
 <button class="vue-button" @click="document.getElementById('fileInput').click()">Choose&nbsp;File
 </button>
 <div> filename </div>
 <input
   type="file"
   ref="file"
   style="display:none"
   name="vue-file-input"
   id="fileInput"
   :disabled="user.availability"
   @change="onFileSelected"
 >
</div>

【问题讨论】：

请查看answer

【参考方案1】：

使用 Vue Refs 而不是查询 DOM，这应该可以正常工作：

<div class="vue-file-wrapper">
  <button class="vue-button" @click.prevent="$refs.file.click()">Choose&nbsp;File
  </button>
  <div> filename </div>
  <input
    type="file"
    ref="file"
    style="display:none"
    name="vue-file-input"
    id="fileInput"
    :disabled="user.availability"
    @change="onFileSelected"
  />
</div>

这是显示它有效的 jsfiddle：https://jsfiddle.net/Lgc5rnzs

【讨论】：

或者根本不使用按钮...参见例如bulma.io/documentation/form/file 证明，您可以将输入类型文件包装在仍然使用默认 html5 输入机制的“按钮”中。.. :)

我已经尝试了你上面的建议。它仍然是同样的问题。由于我们平台的样式，我需要使用按钮。

@user12763413 你试过我的答案了吗？它应该可以正常工作。

@hammed-oyedele 这里是你的答案的 jsfiddle，表明它有效：jsfiddle.net/sLmoyjv7

是的，我确实尝试过您的回答，这是同一个问题。无论我在 name="vue-file-input" 中尝试什么，它都会将我带到那个 url。如果我输入 name="file-input" 然后它会带我到localhost:3000/availability?file-input=