Форма входного файла Vuejs
В моем приложении 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>
Ответы 2
Он работает нормально. Вы можете проверить приведенную ниже скрипку. https://jsfiddle.net/tyagdvm5/
<b-form-file style = "display:none;" v-model = "file2" choose-label = "Attachment2"></b-form-file>
Или для точного решения создайте скрипт и загрузите ссылку.
Здесь $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/>.
@JulianK Посмотрите, поможет ли что-нибудь из эти посты. В качестве альтернативы взгляните на обработчик событий oncancel.
Большое спасибо за помощь!
Большое спасибо за ответ. Если бы я решил использовать собственный ввод файла, каким был бы канонический способ узнать, когда диалоговое окно было закрыто? Я хотел использовать компонент vue в сочетании с функцией просмотра.