updates

src/components.d.ts

@@ -11,3 +11,15 @@ declare module 'vue' {
     Avatar: typeof Avatar
   }
 }
+
+// declare module '@vue/runtime-core' {
+//   export interface GlobalComponents {
+//     AppCard: typeof import('./src/components/base/AppCard.vue')['default']
+//     AppContainer: typeof import('./src/components/base/AppContainer.vue')['default']
+//     Avatar: typeof import('./src/components/base/Avatar.vue')['default']
+//     RouterLink: typeof import('vue-router')['RouterLink']
+//     RouterView: typeof import('vue-router')['RouterView']
+//   }
+// }
+
+// export {}

src/components/UploadImage.vue

-<script setup lang="ts">
-import md5 from 'blueimp-md5'
-import { ref, withDefaults, watch } from 'vue'
-import { getSignature, uploadFile } from '@/api/base'
-import type { UploaderFileListItem } from 'vant'
-
-const props = withDefaults(defineProps<{ modelValue: string[]; prefix?: string }>(), { prefix: 'upload/psp/' })
-const emit = defineEmits(['update:modelValue'])
-
-const fileList = ref<UploaderFileListItem[]>([])
-
-watch(props.modelValue, files => {
-  fileList.value = files.map((url: string) => ({ url }))
-})
-
-// 上传
-const afterRead = async (file: any) => {
-  // 获取签名
-  const signature: any = await getSignature()
-  const rawFile = file.file
-  const rawFileName = rawFile?.name || ''
-  const key = props.prefix + md5(rawFileName + new Date().getTime()) + rawFileName.substr(rawFileName.lastIndexOf('.'))
-  file.status = 'uploading'
-  file.message = '上传中...'
-  file.url = `${signature.host}/${key}`
-  // 上传文件
-  const params = {
-    key,
-    OSSAccessKeyId: signature.accessid,
-    policy: signature.policy,
-    signature: signature.signature,
-    success_action_status: '200',
-    file: rawFile
-  }
-  uploadFile(params)
-    .then(() => {
-      file.status = 'done'
-      file.message = '上传成功'
-      emit(
-        'update:modelValue',
-        fileList.value.map((item: any) => item.url)
-      )
-    })
-    .catch(() => {
-      file.status = 'failed'
-      file.message = '上传失败'
-    })
-}
-</script>
-
-<template>
-  <van-uploader :after-read="afterRead"></van-uploader>
-</template>

src/components/UploadFileList.vue → src/components/base/AppUpload.vue

@@ -4,24 +4,35 @@ import { ref, withDefaults, watch, computed } from 'vue'
 import { getSignature, uploadFile } from '@/api/base'
 import type { UploaderFileListItem } from 'vant'
 
-const props = withDefaults(defineProps<{ modelValue?: string[]; prefix?: string }>(), { prefix: 'upload/psp/' })
+const props = withDefaults(defineProps<{ modelValue?: string | string[]; prefix?: string }>(), {
+  prefix: 'upload/psp/'
+})
 const emit = defineEmits(['update:modelValue'])
 
 const fileList = ref<UploaderFileListItem[]>([])
 
+// 是否为列表
 const isFileList = computed(() => {
   return Array.isArray(props.modelValue)
 })
+// 文件上传数量限制
+const maxCount = computed(() => {
+  return isFileList.value ? Infinity : 1
+})
 
 watch(
   () => props.modelValue,
-  files => {
-    if (Array.isArray(files)) {
-      fileList.value = files.map((url: string) => ({ url }))
-    }
+  value => {
+    fileList.value = Array.isArray(value) ? value.map((url: string) => ({ url })) : (value && [{ url: value }]) || []
   }
 )
-console.log(isFileList)
+
+// 更新modelValue
+const handleEmitUpdate = () => {
+  const value = isFileList.value ? fileList.value.map((item: any) => item.url) : fileList.value[0]?.url
+  emit('update:modelValue', value)
+}
+
 // 上传
 const afterRead = async (file: any) => {
   // 获取签名
@@ -45,25 +56,20 @@ const afterRead = async (file: any) => {
     .then(() => {
       file.status = 'done'
       file.message = '上传成功'
-      emit(
-        'update:modelValue',
-        fileList.value.map((item: any) => item.url)
-      )
+      handleEmitUpdate()
     })
     .catch(() => {
       file.status = 'failed'
       file.message = '上传失败'
     })
 }
-// 删除
-const onDelete = () => {
-  emit(
-    'update:modelValue',
-    fileList.value.map((item: any) => item.url)
-  )
-}
 </script>
 
 <template>
-  <van-uploader v-model="fileList" :after-read="afterRead" @delete="onDelete"></van-uploader>
+  <van-uploader
+    v-model="fileList"
+    :after-read="afterRead"
+    :max-count="maxCount"
+    @delete="handleEmitUpdate"
+  ></van-uploader>
 </template>

src/modules/learn/views/Publish.vue

@@ -2,7 +2,7 @@
 import { reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { createCourseRecord } from '../api'
-import UploadFileList from '@/components/UploadFileList.vue'
+import AppUpload from '@/components/base/AppUpload.vue'
 import { Toast } from 'vant'
 const router = useRouter()
 const route = useRoute()
@@ -31,7 +31,7 @@ function onSubmit() {
       />
       <van-field :rules="[{ validator: pictureValidator, message: '请上传图片' }]">
         <template #input>
-          <UploadFileList v-model="form.picture"></UploadFileList>
+          <AppUpload v-model="form.picture"></AppUpload>
         </template>
       </van-field>
       <van-button block round native-type="submit" class="my-button">发表</van-button>

src/modules/qa/views/Publish.vue

@@ -2,7 +2,7 @@
 import { reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { createQuestion } from '../api'
-import UploadFileList from '@/components/UploadFileList.vue'
+import AppUpload from '@/components/base/AppUpload.vue'
 import { Toast } from 'vant'
 const router = useRouter()
 
@@ -34,7 +34,7 @@ function onSubmit() {
       />
       <van-field>
         <template #input>
-          <UploadFileList v-model="form.picture"></UploadFileList>
+          <AppUpload v-model="form.picture"></AppUpload>
         </template>
       </van-field>
       <van-button block round native-type="submit" class="my-button">发布</van-button>

src/modules/team/views/Create.vue

 <script setup lang="ts">
 import { reactive } from 'vue'
 import { createTeam } from '../api'
-import UploadFileList from '@/components/UploadFileList.vue'
+import AppUpload from '@/components/base/AppUpload.vue'
 import { Toast } from 'vant'
 const form = reactive({ name: '', slogan: '', logo: '', brief: '' })
 
@@ -25,7 +25,7 @@ function onSubmit() {
       />
       <van-field :rules="[{ required: true, message: '请上传图片' }]">
         <template #input>
-          <UploadFileList></UploadFileList>
+          <AppUpload v-model="form.logo"></AppUpload>
         </template>
       </van-field>
       <van-button block round native-type="submit" class="my-button">立即创建</van-button>