vue3+ts多文件上传

在Vue3中使用TypeScript进行多文件上传，你可以按照以下步骤进行操作：

1. 首先，创建一个文件上传组件。你可以使用`custom-upload`组件，并通过`v-model`绑定一个表单项，用于存储上传的文件列表。在`<script>`标签中，引入需要的接口类型和API封装方法。

   <template>
     <custom-upload v-model="formInline.attachmentResultList" :attr="attrResult" />
   </template>

   <script>
   import { ref } from 'vue'; // 引入Vue3的ref方法
   import { uploadFile } from '@/api';
   
   export default {
     setup() {
       const formInline = ref({ attachmentResultList: [] });

       const attrResult = ref({
         id: 'fileUploadId',
         name: 'attachmentName',
         limit: 999,
         readonly: true
       });

       return {
         formInline,
         attrResult
       };
     }
   };
   </script>

2. 在API文件中，定义多文件上传的方法`uploadFile`。该方法接收一个`FormData`类型的参数，用于包含上传的文件数据。通过调用`http.upload`方法，并指定上传文件的URL路径和请求头，实现文件上传功能。

   // api.ts
   import http from '@/api';
   import { UPLOAD_FILE } from '@/api/config/servicePort';

   export const uploadFile = (params: FormData) => {
     return http.upload<Upload.ResFileList>(UPLOAD_FILE + '/file/uploadFile', params, {
       headers: { 'Content-Type': 'multipart/form-data' }
     });
   };

3. 定义文件上传的接口类型。根据你的需求，可以根据接口返回的数据定义相应的类型。

   // interface.ts
   export namespace Upload {
     export interface ResFileList {
       id: string;
       fileName: string;
       fileUrl: string;
       uploadTime: string;
       operator: string;
       fileType: string;
       fileSize: number;
       fileOldname: string;
     }
   }

通过上述步骤，你就可以在Vue3中使用TypeScript实现多文件上传的功能了。在你的组件中，用户可以选择多个文件进行上传，并且上传成功后，文件相关的信息将会被保存在`formInline.attachmentResultList`中，你可以根据业务需求进行进一步处理。