使用Vue 3创建一个简单的文件上传组件，并处理上传的文件

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) {
        alert('请选择一个文件');
        return;
      }
 
      const formData = new FormData();
      formData.append('file', this.selectedFile);
 
      // 使用你选择的HTTP库发送formData
      // 例如使用axios:
      // axios.post('your-upload-url', formData, {
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   }
      // }).then(response => {
      //   console.log(response);
      // }).catch(error => {
      //   console.error(error);
      // });
 
      // 替换上面的axios请求为你的上传逻辑
    }
  }
};
</script>

这个简单的Vue 3组件包括了文件选择和文件上传的基本逻辑。它使用了<input type="file">来让用户选择文件，并在用户选择文件后，通过一个按钮触发上传逻辑。上传逻辑中，它创建了一个FormData对象，将选择的文件添加到里面，然后发送到服务器。这里没有具体的上传实现，你需要根据实际情况使用例如axios这样的HTTP库来发送请求。