如果只上传一个文件 v-model该怎么定义

在Vue3中，如果你想创建一个只能上传单个文件的组件并实现v-model双向绑定，你可以这样做。首先，你需要定义一个`FileList`类型的prop，这将是组件接收的文件实例。由于Vue3的setup语法，我们可以在`defineProps`里声明它：

<!-- FileUploader.vue -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 定义props以接受单个文件
defineProps({
  file: {
    type: Object as PropType<File>,
    required: true,
    default: () => null
  }
});

// 初始化一个ref存储选择的文件
const selectedFileRef = ref(null);

onMounted(() => {
  // 如果有初始文件，设置ref
  if (process.env.NODE_ENV !== 'production' && this.file) {
    selectedFileRef.value = this.file;
  }
});
</script>

<template>
  <input 
    type="file"
    @change="handleFileChange"
    :value="selectedFileRef"
  />
</template>

<script setup>
function handleFileChange(e) {
  const files = e.target.files || []; // 获取多选还是单选的文件
  if (files.length === 1) {
    selectedFileRef.value = files[0]; // 只保留第一个文件
  }
  emit('update:file', selectedFileRef.value); // 更新prop
}
</template>

在这个组件中，`<input>`标签的`:value`属性绑定了`selectedFileRef`，当用户选择文件时，`handleFileChange`函数会更新`selectedFileRef`的值。这样，当你在父组件中使用`<file-uploader :file.sync="parentFile" />`时，`parentFile`就会实时反映出所选的文件。