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'
 
-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 props = withDefaults(
+  defineProps<{
+    modelValue: string | []
+    prefix?: string
+    size?: number
+    beforeUploadFiles?: (file: any) => boolean | void
+    onChange?: (file: any, files: any) => void
+  }>(),
+  {
+    prefix: 'upload/admin/'
+  }
+)
 
-const emit = defineEmits(['update:modelValue', 'success'])
+const emit = defineEmits(['update:modelValue'])
 
 const uploadData = ref()
 
 const fileList = ref<UploadUserFile[]>([])
 
-watchEffect(() => {
-  fileList.value = Array.isArray(props.modelValue) ? props.modelValue.map(item => ({ ...item })) : []
-})
+watch(
+  () => props.modelValue,
+  value => {
+    fileList.value = Array.isArray(value) ? [...value] : []
+  }
+)
 
 const showFileList = computed(() => {
   return Array.isArray(props.modelValue)
@@ -33,16 +37,8 @@ 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.substr(fileName.lastIndexOf('.'))
+  const key = props.prefix + md5(fileName + new Date().getTime()) + '/' + fileName
   const response: Record<string, any> = await getSignature()
   uploadData.value = {
     key,
@@ -53,42 +49,29 @@ const handleBeforeUpload = async (file: any) => {
     url: `${response.host}/${key}`
   }
   file.url = `${response.host}/${key}`
-  if (props.beforeUpload) {
-    return props.beforeUpload(file)
+  if (props.beforeUploadFiles) {
+    return props.beforeUploadFiles(file)
   }
 }
 
 // 上传成功
-const handleSuccess = (response: any, file: any, files: any) => {
+const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => {
   if (!files.every((item: any) => item.status === 'success')) return
   if (showFileList.value) {
-    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
+    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',
-        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)
 }
 
 // 上传限制
@@ -97,12 +80,12 @@ const handleExceed: UploadProps['onExceed'] = () => {
 }
 
 // 删除
-const handleRemove: UploadProps['onRemove'] = (file, files) => {
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   if (showFileList.value) {
     emit(
       'update:modelValue',
-      files.map((item: any) => {
-        return { name: item.name, url: item.url || item.raw.url }
+      uploadFiles.map((item: any) => {
+        return { name: item.name, url: item.url || item.raw.url, size: item.size, type: item.type }
       })
     )
   } else {
@@ -112,7 +95,7 @@ const handleRemove: UploadProps['onRemove'] = (file, files) => {
 
 // 预览
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
-  window.open(uploadFile.url)
+  console.log(uploadFile)
 }
 </script>
 
@@ -127,22 +110,24 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
+    :limit="1"
     class="uploader"
   >
-    <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 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>
       </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>
-    </slot>
+    </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>
     <template #tip>
       <div class="el-upload__tip"><slot name="tip"></slot></div>
     </template>
@@ -152,7 +137,6 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
 <style lang="scss">
 .uploader {
   flex: 1;
-  overflow: hidden;
 }
 .avatar-uploader {
   width: 178px;

src/modules/user/components/UploadEventsDialog.vue

@@ -60,7 +60,7 @@ const fetchFileUpload = () => {
   // })
 }
 
-const fileData = $ref([])
+const fileData = $ref<any>([])
 </script>
 
 <template>
@@ -81,7 +81,7 @@ const fileData = $ref([])
     </el-form>
     <div class="btn-box">
       <el-button style="margin-right: 20px" type="primary" @click="downloadTemplate">下载事件数据模板</el-button>
-      <AppUpload v-model="fileData" :limit="1">
+      <AppUpload v-model="fileData">
         <el-button type="primary">上传事件数据</el-button>
       </AppUpload>
       <!-- <el-upload

src/modules/user/components/UploadUserDialog.vue

@@ -51,7 +51,7 @@ const fetchFileUpload = () => {
   }
 }
 
-const fileData = $ref([])
+const fileData = $ref<any>([])
 </script>
 
 <template>
@@ -76,7 +76,7 @@ const fileData = $ref([])
     </el-form>
     <div class="btn-box">
       <el-button type="primary" style="margin-right: 20px" @click="downloadTemplate">下载用户数据模板</el-button>
-      <AppUpload v-model="fileData" :limit="1">
+      <AppUpload v-model="fileData">
         <el-button type="primary">上传用户数据</el-button>
       </AppUpload>
       <!-- <el-upload