update

src/components/base/AppUpload copy.vue

@@ -12,7 +12,6 @@ const props = withDefaults(
     size?: number
     beforeUploadFiles?: (file: any) => boolean | void
     onChange?: (file: any, files: any) => void
-    limit?: number
   }>(),
   {
     prefix: 'upload/admin/'
@@ -111,7 +110,6 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
-    :limit="limit"
     class="uploader"
   >
     <template v-if="showFileList">

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
-    limit?: number
-  }>(),
-  {
-    prefix: 'upload/admin/'
-  }
-)
+interface Props {
+  modelValue: string | { name: string; url: string }[]
+  prefix?: string
+  size?: number
+  limit?: number
+  beforeUpload?: (file: any) => void
+}
 
-const emit = defineEmits(['update:modelValue'])
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'upload/saas-lab/'
+})
+
+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)
@@ -38,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,
@@ -50,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)
 }
 
 // 上传限制
@@ -81,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 {
@@ -96,7 +112,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 
 // 预览
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
-  console.log(uploadFile)
+  window.open(uploadFile.url)
 }
 </script>
 
@@ -111,6 +127,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
+    :limit="limit"
     class="uploader"
   >
     <slot>

src/modules/user/components/UploadEventsDialog.vue

@@ -60,7 +60,7 @@ const fetchFileUpload = () => {
   // })
 }
 
-const fileData = $ref<any>([])
+const fileData = $ref([])
 </script>
 
 <template>

src/modules/user/components/UploadUserDialog.vue

@@ -51,7 +51,7 @@ const fetchFileUpload = () => {
   }
 }
 
-const fileData = $ref<any>([])
+const fileData = $ref([])
 </script>
 
 <template>