Question

我正在为Vuetify的v-file-input创建一个可重用的组件。

Form.vue

<BaseFile v-model="image" label="Upload Image"/>

<script>
  export default {
    name: 'Form',
    data() {
      return {
        image: []
      }
    }
  }
</script>

BaseFile.vue

<v-file-input
  :value="value"
  :label="label"
  solo
  show-size
  @change="updateValue">
</v-file-input>

<script>
 export default {
   name: 'BaseFile',
   props: {
     label: { type: String },
     value: { type: Array }
   },
   methods: {
     updateValue(file) {
       if (file.name) {
          const reader = new FileReader();
          reader.onload = e => {
            const base64Data = e.target.result;
            const uploadFile = [{ fileName: file.name, base64: base64Data }];

            this.$emit('input', uploadFile);
          }
          reader.readAsDataURL(file);
       }
     }
   }
 }
</script>

图像值变为

[ 
  { fileName: 'hello.png', base64: '.....'}
]

但是我得到

TypeError：无法读取未定义的属性'length'”

Answer 1

问题是v-file-input期望value道具是“ File对象的单个或数组”。因此，一旦您选择一个文件，image数据（因此就是value道具）的内容将变得与Vuetify期望的有所不同...

无法读取v文件输入Vuetify的属性'length'of undefined“`

1 个答案: