用 vue3 typescript 做一个表单，上传图片到API

在 Vue3 中使用 TypeScript 编写表单并上传图片到 API，你可以按照以下步骤进行：

1. 安装依赖：
首先确保安装了 Vue CLI 和 TypeScript。运行以下命令安装对应的依赖：

   npm install -D @vue/cli@latest typescript vue-tsx @vue/compiler-dom

2. 设置配置：
更新 `.vue.config.js` 文件，启用 TypeScript 支持：

   module.exports = {
     transpileDependencies: ['axios'], // 添加对 axios 的处理
     chainWebpack: config => {
       config.module.rules
         .get('typescript') || config.module.rule('typescript')
         .use('ts-loader')
         .tap(options => ({ ...options, appendTsSuffixTo: [/\.vue$/] }));
     },
   };

3. 创建组件：
使用 `*.tsx` 扩展名创建一个 Vue 组件，如 `UploadForm.vue.tsx`：

   import { defineComponent, ref, onMounted, emit } from "vue";
   import axios from "axios";

   interface FormData {
     file: File;
   }

   export default defineComponent({
     props: {
       apiURL: { type: string, required: true }, // 你的 API URL
     },
     setup(props) {
       const fileInputRef = ref<HTMLInputElement>(null);
       const formData = ref<FormData>({
         file: null,
       });

       async function handleFileChange(e) {
         const selectedFile = e.target.files && e.target.files[0];
         if (selectedFile) {
           formData.value.file = selectedFile;
           onMounted(async () => {
             try {
               await uploadFile();
             } catch (error) {
               console.error("Error uploading file:", error);
               emit("uploadFailed", error.message); // 发送错误消息
             }
           });
         }
       }

       async function uploadFile() {
         const config: any = {
           headers: {
             "Content-Type": "multipart/form-data",
           },
         };

         await axios.post(props.apiUrl, formData.value, config);
       }

       return {
         fileInputRef,
         handleFileChange,
       };
     },
   });

4. 使用组件：
在 Vue 模板中引入并使用组件：

   <template>
     <div>
       <input
         type="file"
         ref="fileInput"
         @change="handleFileChange"
       />
       <!-- 可能还需要展示文件上传状态或错误信息 -->
     </div>
   </template>

   <script lang="ts" src="/src/components/UploadForm.vue.tsx"></script>

现在你已经有了一个简单的 Vue3 TypeScript 表单组件，用户可以选择文件，然后当他们提交时，文件会被上传到指定的 API。注意，这个示例假设你已经在项目中安装了 Axios 用于发送 HTTP 请求。