update

src/components/base/AppUpload.vue

 <script lang="ts" setup>
+import type { UploadProps, UploadUserFile } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import type { UploadProps, UploadUserFile } from 'element-plus'
 import md5 from 'blueimp-md5'
 import { getSignature } from '@/api/base'
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | []
-    prefix?: string
-    size?: number
-    beforeUploadFiles?: (file: any) => boolean | void
-    onChange?: (file: any, files: any) => void
-  }>(),
-  {
-    prefix: 'upload/saas-lab/'
-  }
-)
+interface Props {
+  modelValue: string | { name: string; url: string }[]
+  prefix?: string
+  size?: number
+  limit?: number
+  beforeUpload?: (file: any) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'upload/saas-dml/'
+})
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'success'])
 
 const uploadData = ref()
 
 const fileList = ref<UploadUserFile[]>([])
 
-watch(
-  () => props.modelValue,
-  value => {
-    fileList.value = Array.isArray(value) ? [...value] : []
-  }
-)
+watchEffect(() => {
+  fileList.value = Array.isArray(props.modelValue) ? props.modelValue.map(item => ({ ...item })) : []
+})
 
 const showFileList = computed(() => {
   return Array.isArray(props.modelValue)
@@ -37,8 +33,16 @@ const showFileList = computed(() => {
 
 // 上传之前
 const handleBeforeUpload = async (file: any) => {
+  if (props.limit && fileList.value.length >= props.limit && props.limit > 1) {
+    ElMessage.error(`只能上传${props.limit}个文件`)
+    return false
+  }
+  if (props.size && file.size > props.size) {
+    ElMessage.error(`文件大小不能超过${props.size / 1024 / 1024}M`)
+    return false
+  }
   const fileName = file.name
-  const key = props.prefix + md5(fileName + new Date().getTime()) + '/' + fileName
+  const key = props.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
   const response: Record<string, any> = await getSignature()
   uploadData.value = {
     key,
@@ -49,29 +53,42 @@ const handleBeforeUpload = async (file: any) => {
     url: `${response.host}/${key}`
   }
   file.url = `${response.host}/${key}`
-  if (props.beforeUploadFiles) {
-    return props.beforeUploadFiles(file)
+  if (props.beforeUpload) {
+    return props.beforeUpload(file)
   }
 }
 
 // 上传成功
-const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => {
+const handleSuccess = (response: any, file: any, files: any) => {
   if (!files.every((item: any) => item.status === 'success')) return
   if (showFileList.value) {
-    emit(
-      'update:modelValue',
-      files.map((item: any) => {
-        return {
-          name: item.name,
-          url: item.url || item.raw.url,
-          size: item.size || item.raw.size,
-          type: item.type || item.raw.type
+    if (props.limit && props.limit === 1) {
+      const last = files[files.length - 1]
+      emit('update:modelValue', [
+        {
+          name: last.name,
+          url: last.url || last.raw?.url,
+          size: last.size || last.raw?.size,
+          type: last.type || last.raw?.type
         }
-      })
-    )
+      ])
+    } else {
+      emit(
+        'update:modelValue',
+        files.map((item: any) => {
+          return {
+            name: item.name,
+            url: item.url || item.raw?.url,
+            size: item.size || item.raw?.size,
+            type: item.type || item.raw?.type
+          }
+        })
+      )
+    }
   } else {
     emit('update:modelValue', file.raw.url)
   }
+  emit('success', file, files)
 }
 
 // 上传限制
@@ -80,12 +97,12 @@ const handleExceed: UploadProps['onExceed'] = () => {
 }
 
 // 删除
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+const handleRemove: UploadProps['onRemove'] = (file, files) => {
   if (showFileList.value) {
     emit(
       'update:modelValue',
-      uploadFiles.map((item: any) => {
-        return { name: item.name, url: item.url || item.raw.url, size: item.size, type: item.type }
+      files.map((item: any) => {
+        return { name: item.name, url: item.url || item.raw.url }
       })
     )
   } else {
@@ -95,7 +112,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 
 // 预览
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
-  console.log(uploadFile)
+  window.open(uploadFile.url)
 }
 </script>
 
@@ -110,23 +127,23 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
+    :limit="limit"
     class="uploader"
   >
-    <template v-if="showFileList">
-      <template v-if="$attrs['list-type'] === 'picture-card'">
-        <el-icon><Plus /></el-icon>
-      </template>
-      <template v-else-if="props.beforeUploadFiles">
-        <el-button type="primary" size="default" round>上传图片/视频附件</el-button>
-      </template>
-      <template v-else>
-        <el-button type="primary" class="app-upload-btn">点击上传</el-button>
+    <slot>
+      <template v-if="showFileList">
+        <template v-if="$attrs['list-type'] === 'picture-card'">
+          <el-icon><Plus /></el-icon>
+        </template>
+        <template v-else>
+          <el-button type="primary" plain round>本地文件</el-button>
+        </template>
       </template>
-    </template>
-    <div class="avatar-uploader" v-else>
-      <el-image :src="(modelValue as string)" fit="contain" v-if="modelValue" />
-      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-    </div>
+      <div class="avatar-uploader" v-else>
+        <el-image :src="(modelValue as string)" fit="contain" v-if="modelValue" />
+        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+      </div>
+    </slot>
     <template #tip>
       <div class="el-upload__tip"><slot name="tip"></slot></div>
     </template>
@@ -136,6 +153,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
 <style lang="scss">
 .uploader {
   flex: 1;
+  overflow: hidden;
 }
 .avatar-uploader {
   width: 178px;

src/modules/user/components/UploadEventsDialog.vue

 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { getEventList, importEvent } from '../api'
 import type { EventProp } from '../types'
@@ -17,7 +17,7 @@ const form = reactive({
   event_id: ''
 })
 
-const rules = ref<FormRules>({
+const rules = ref<any>({
   event_id: [{ required: true, message: '请选择' }]
 })
 
@@ -81,7 +81,7 @@ const fileData = $ref<any>([])
     </el-form>
     <div class="btn-box">
       <el-button style="margin-right: 20px" type="primary" @click="downloadTemplate">下载事件数据模板</el-button>
-      <AppUpload v-model="fileData">
+      <AppUpload v-model="fileData" :limit="1">
         <el-button type="primary">上传事件数据</el-button>
       </AppUpload>
       <!-- <el-upload

src/modules/user/components/UploadUserDialog.vue

 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { getMemberConnectionsList, getMemberGroups, importMember } from '../api'
 import type { ConnectionsProp } from '../types'
@@ -17,7 +17,7 @@ const form = reactive({
   groups_id: ''
 })
 
-const rules = ref<FormRules>({
+const rules = ref<any>({
   connection_id: [{ required: true, message: '请选择' }]
 })
 
@@ -76,7 +76,7 @@ const fileData = $ref<any>([])
     </el-form>
     <div class="btn-box">
       <el-button type="primary" style="margin-right: 20px" @click="downloadTemplate">下载用户数据模板</el-button>
-      <AppUpload v-model="fileData">
+      <AppUpload v-model="fileData" :limit="1">
         <el-button type="primary">上传用户数据</el-button>
       </AppUpload>
       <!-- <el-upload