feat: 文件列表上传组件

packages/upload-list/index.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-08-16 17:33:41
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-16 18:23:17
+ * @FilePath: \vue3\packages\upload-list\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <el-upload v-model:file-list="value" :accept="accept" :http-request="httpRequest">
+    <el-button type="primary" plain>
+      点击上传
+    </el-button>
+  </el-upload>
+</template>
+
+<script lang="ts" setup name="ThUploadList">
+import type { UploadRequestOptions, UploadUserFile } from 'element-plus'
+
+const props = withDefaults(
+  defineProps<{
+    /** 可上传的文件类型 */
+    accept?: string
+    /** 文件集合 */
+    fileList?: FileVO[]
+    /** 文件上传的请求函数 */
+    request: (formData: FormData, args?: any) => Promise<FileVO>
+    /** 自定义文件上传路径前缀 */
+    filePath?: string
+  }>(), {
+    fileList: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'update:fileList', file: FileVO[]): void
+}>()
+
+let value = $ref<UploadUserFile[]>([])
+
+async function httpRequest({ file, onProgress, onSuccess, onError }: UploadRequestOptions) {
+  const formData = new FormData()
+  formData.append('file', file)
+  if (props.filePath)
+    formData.append('filePath', props.filePath)
+  try {
+    const res = await props.request(formData, {
+      onUploadProgress: onProgress,
+    })
+    onSuccess(res)
+    emit('update:fileList', [...props.fileList, res])
+  }
+  catch (err) {
+    onError(err)
+  }
+}
+
+function init() {
+  if (value.length === 0) {
+    value = props.fileList.map(file => ({
+      name: file.name!,
+      url: file.url,
+      status: 'success',
+    }))
+  }
+}
+init()
+
+watch(() => props.fileList, init)
+</script>