perf: 头像上传参数

packages/upload-avatar/index.vue

@@ -14,7 +14,7 @@
       </div>
     </slot>
   </div>
-  <el-dialog v-model="showDialog" title="上传头像" width="800px" append-to-body @opened="modalOpened" @closed="closeDialog">
+  <el-dialog v-if="!disabled" v-model="showDialog" title="上传头像" width="800px" append-to-body @opened="modalOpened" @closed="closeDialog">
     <el-row>
       <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <VueCropper
@@ -71,7 +71,8 @@ import { Minus, Plus, RefreshLeft, RefreshRight, Upload } from '@element-plus/ic
 
 const props = withDefaults(defineProps<{
   accpet?: string
-  modelValue?: string
+  fileId?: number | string
+  fileUrl?: string
   /**
    * 图片大小（单位MB）
    *
@@ -82,23 +83,29 @@ const props = withDefaults(defineProps<{
   autoCropHeight?: number
   /** 默认生成截图框高度 */
   autoCropWidth?: number
+  /** 上传请求函数 */
   uploadFunction?: (formData: FormData) => Promise<FileVO>
+  /** 文件信息请求函数 */
+  fileFunction: (fileId?: number | string) => Promise<FileVO>
   disabled?: boolean
 }>(), {
   accpet: '.jpeg,.jpg,.png,.bmp',
+  fileId: '',
+  fileUrl: '',
   fileSize: 2,
   autoCropHeight: 200,
   autoCropWidth: 200,
-  uploadFunction: () => Promise.resolve({}),
 })
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', modelValue?: string): void
+  (event: 'update:fileUrl', fileId?: number): void
+  (event: 'update:filelId', modelValue?: string): void
   (event: 'onSuccess', file: FileVO): void
   (event: 'onError', error: Error): void
 }>()
 
-const avatarUrl = useVModel(props, 'modelValue', emit)
+let avatarUrl = $ref(props.fileUrl)
+const filelId = useVModel(props, 'fileId', emit)
 
 const imageStyle = computed(() => ({
   height: `${props.autoCropHeight}px`,
@@ -182,8 +189,14 @@ function selectImage() {
 }
 
 async function uploadImg(blob: Blob) {
+  if (!props.uploadFunction) {
+    ElMessage.error('请定义接口请求函数')
+    emit('onError', new Error('请定义接口请求函数'))
+    return
+  }
   if (blob.size > props.fileSize * 1024 * 1024) {
     ElMessage.error('您的图片经过剪裁依然很大，请重新选择图片')
+    emit('onError', new Error('您的图片经过剪裁依然很大，请重新选择图片'))
     return
   }
 
@@ -193,7 +206,8 @@ async function uploadImg(blob: Blob) {
 
   try {
     const res = await props.uploadFunction(formData)
-    avatarUrl.value = res.url
+    avatarUrl = res.url
+    filelId.value = res.id
     showDialog = false
     emit('onSuccess', res)
   }
@@ -212,6 +226,14 @@ function closeDialog() {
   reset()
   loading = false
 }
+
+watch(() => props.fileId, async () => {
+  if (!props.fileId || avatarUrl)
+    return
+
+  const res = await props.fileFunction(props.fileId)
+  avatarUrl = res.url
+})
 </script>
 
 <style>