前端Vue如何通过Get属性获取封装的上传文件的值

如果你封装了一个上传组件，可以在组件的 props 中定义一个 file 属性，并使用 v-model 绑定，然后在上传组件内部通过 $emit 把文件对象传递给父组件，父组件就可以通过 v-model 绑定的 file 属性获取上传的文件对象。

示例代码如下：

上传组件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
  </div>
</template>

<script>
export default {
  props: {
    file: {
      type: Object,
      default: null
    }
  },
  methods: {
    uploadFile() {
      const file = this.$refs.fileInput.files[0]
      this.$emit('update:file', file)
    }
  }
}
</script>

父组件：

<template>
  <div>
    <upload-component v-model="file"></upload-component>
    <div v-if="file">
      文件名：{{ file.name }}
    </div>
  </div>
</template>

<script>
import UploadComponent from './UploadComponent.vue'

export default {
  components: {
    UploadComponent
  },
  data() {
    return {
      file: null
    }
  }
}
</script>

这样，父组件就可以通过获取 file 属性来获取上传的文件对象了。