Vue3 使用 setup语法糖 + TypeScript完成头像上传功能

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadAvatar">上传头像</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const selectedFile = ref<File | null>(null);
 
    const handleFileChange = (event: Event) => {
      const input = event.target as HTMLInputElement;
      if (!input.files || !input.files.length) return;
      selectedFile.value = input.files[0];
    };
 
    const uploadAvatar = async () => {
      if (!selectedFile.value) {
        alert('请选择一个文件');
        return;
      }
 
      const formData = new FormData();
      formData.append('avatar', selectedFile.value);
 
      try {
        const response = await fetch('your-upload-api', {
          method: 'POST',
          body: formData,
        });
        if (response.ok) {
          alert('上传成功');
        } else {
          alert('上传失败');
        }
      } catch (error) {
        alert('上传异常');
      }
    };
 
    return {
      handleFileChange,
      uploadAvatar,
    };
  },
});
</script>

这个代码实例展示了如何在Vue 3中使用Composition API（setup函数）和TypeScript来实现一个简单的头像上传功能。它包括了文件选择、验证文件是否存在以及创建FormData对象来发送文件的完整流程。