javascript - 使用 Vue JS 的可重用文件组件

Question

我有一个组件叫做 BaseFile

组件/BaseFile.vue

<template>
  <div>
    <b-form-group :label="label">
      <b-form-file
        :value="value"
        :placeholder="placeholder"
        :accept="acceptedExtensions"
        @input="updateValue">
      </b-form-file>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    name: 'BaseFile',
    props:   {
      label: { type: String },
      value: { type: Object },
      placeholder: { type: String, default: "Choose a file..." },
      acceptedExtensions: { type: String, default: "image/jpeg, image/png" }
    }, 
    methods: {
      updateValue(value) {
        // console.log(typeof value)
        // console.log(event.target.value)
        this.$emit('input', value);
      }
    }
  }
</script>

然后我在我的 Users/new.vue

中调用这个组件

<BaseFile label="Primary Image" v-model="primaryImage"/>

<script>
import BaseFile from "~/components/UI/BaseFile";
export default {
  components: {
    BaseFile
  },
  data() {
    return {
      profileImage: {}
    }
  }
</script>

当我尝试在 BaseFile 组件中添加文件时，我得到的错误是

 Invalid prop: type check failed for prop "value". Expected Object, got File.

我查看了 Vue 的文档，没有可用的 File 属性。但我需要文件，因为我要将它直接上传到 s3。

Answer 1

Vuejs 将使用 instanceof 进行类型检查。

因此，如果您同时需要这两种类型，则只需添加 File:

  export default {
    name: 'BaseFile',
    props:   {
      label: { type: String },
      value: { type: [Object, File] },
      placeholder: { type: String, default: "Choose a file..." },
      acceptedExtensions: { type: String, default: "image/jpeg, image/png" }
    },
  }

此外，我的建议是使用 undefined 或 null IIUC 初始化 profileImage，您没有使用它。