Question

我有一个名为 BaseFile

的组件

components / 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" }
    },
  }

另外，我的建议是用profileImage或undefined IIUC初始化null，而您不使用它。

Answer 2

由于您期望的数据类型为template<int size> struct color { int width; int height; uint8_t data[size]; };，因此可以通过传递类似这样的数组来将类型设置为File和File

Object

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

2 个答案: