使用插槽确定可点击的元素/触发不可见 type="file" 输入标记的输入事件

如何解决使用插槽确定可点击的元素/触发不可见 type="file" 输入标记的输入事件

我有一个基本组件，它应该能够将多个文件上传到 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:

1. 在 click 中，向输入添加模板引用：

   UploadMediaFiles

2. 在 <input ref="myInput"> 中，创建一个调用输入的 UploadMediaFiles-handler 的组件方法：

   click

3. 在export default { methods: { openFileDialog() { this.$refs.myInput.click() } } } 中，将组件方法传递给槽：

   UploadMediaFiles

4. 在 <slot :openFileDialog="openFileDialog"> 中，将 slot 属性绑定为按钮的 SelectAndPreviewFiles 处理程序：

   click

demo