问题描述
我有一个基本组件,它应该能够将多个文件上传到 Firestore。由于我希望能够在我的应用程序中的多个点上使用此组件,因此我想利用插槽的优势,以便我可以更改覆盖隐藏输入标签的元素。所以不管是按钮,svg等等,我还是希望输入触发点击事件。
目前,只有默认的 img
标签可以触发 @change
事件。
我需要传递更多的道具吗?在我目前的状态下,我如何才能使这项工作发挥作用?
如果您需要更多信息,请告诉我!
干杯!
注意:我还没有让 Firestore 上传的多文件选择生效,但我正在努力。
UploadMediaFiles.vue(子)
<template>
<div class="upload-media-files">
<input
id="input-file"
type="file"
accept="image/*"
@change="addMedia"
class="_add-media-input"
/>
<label for="input-file">
<slot>
<img
src="https://www.clipartmax.com/png/middle/142-1422132_png-file-svg-upload-file-icon-png.png"
alt=""
/>
</slot>
</label>
</div>
</template>
<script>
export default {
name: 'UploadMediaFiles',props: {
multiple: { type: Boolean },accept: { type: String },},data() {
return {
files: [],}
},computed: {},methods: {
async addMedia(event) {
const selectedFiles = event.target.files
console.log(`selectedFiles → `,selectedFiles)
this.files.push(selectedFiles)
this.$emit('selected',this.files)
},}
</script>
SelectAndPreviewFiles(父级)
<template>
<div class="select-and-preview-files">
<UploadMediaFiles accept="image/*" :multiple="true" @selected="(files) => doSomething(files)">
<button>upload file</button>
</UploadMediaFiles>
</div>
</template>
<script>
import UploadMediaFiles from '../atoms/UploadMediaFiles.vue'
export default {
name: 'SelectAndPreviewFiles',components: {
UploadMediaFiles,props: {},data() {
return {}
},methods: {
doSomething(files) {
console.log(`files → `,files)
},}
</script>
解决方法
您可以将一个方法传递给调用隐藏输入的 zipfile
-handler:
-
在
click
中,向输入添加模板引用:UploadMediaFiles
-
在
<input ref="myInput">
中,创建一个调用输入的UploadMediaFiles
-handler 的组件方法:click
-
在
export default { methods: { openFileDialog() { this.$refs.myInput.click() } } }
中,将组件方法传递给槽:UploadMediaFiles
-
在
<slot :openFileDialog="openFileDialog">
中,将 slot 属性绑定为按钮的SelectAndPreviewFiles
处理程序:click