【代码优化】 refactor: 重构相关hook

src/__tests__/hooks/useUploadImg.test.ts

+import { describe, expect, test, vi } from 'vitest'
+
+vi.mock('@/api', () => ({
+  uploadFile: vi.fn(),
+}))
+
+vi.mock('notivue', () => ({
+  push: {
+    error: vi.fn(),
+  },
+}))
+
+import { appendImageUrl, removeImageUrl, toImageList } from '@/hooks/useUploadImg'
+
+describe('hook 辅助函数：useUploadImg', () => {
+  test('toImageList 能统一处理字符串和数组格式的图片值', () => {
+    expect(toImageList('a,,b,')).toEqual(['a', 'b'])
+    expect(toImageList(['a', 'b'])).toEqual(['a', 'b'])
+  })
+
+  test('appendImageUrl 追加图片后保持原有数据格式', () => {
+    expect(appendImageUrl('a,b', 'c')).toBe('a,b,c')
+    expect(appendImageUrl(['a', 'b'], 'c')).toEqual(['a', 'b', 'c'])
+  })
+
+  test('removeImageUrl 删除图片后保持原有数据格式', () => {
+    expect(removeImageUrl('a,b,c', 'b')).toBe('a,c')
+    expect(removeImageUrl(['a', 'b', 'c'], 'b')).toEqual(['a', 'c'])
+  })
+})

src/hooks/useUploadImg.ts

@@ -15,6 +15,26 @@ type UseUploadImgReturnString = BaseReturn & {
 // 传字符串数组时只返回基础
 type UseUploadImgReturnArray = BaseReturn
 
+type ImageValue = string | string[]
+
+export const toImageList = (value: ImageValue): string[] => {
+  return Array.isArray(value) ? value.filter(Boolean) : value.split(',').filter(Boolean)
+}
+
+export function appendImageUrl(value: string, url: string): string
+export function appendImageUrl(value: string[], url: string): string[]
+export function appendImageUrl(value: ImageValue, url: string): ImageValue {
+  const nextList = [...toImageList(value), url].filter(Boolean)
+  return Array.isArray(value) ? nextList : nextList.join(',')
+}
+
+export function removeImageUrl(value: string, url: string): string
+export function removeImageUrl(value: string[], url: string): string[]
+export function removeImageUrl(value: ImageValue, url: string): ImageValue {
+  const nextList = toImageList(value).filter((item) => item !== url)
+  return Array.isArray(value) ? nextList : nextList.join(',')
+}
+
 // 直接传ref('imgs1,imgs2') 或者 ref(['img1','img2]) 传字符串的时候 会多返回一个imgList数组 便于模板使用遍历等
 export function useUploadImg(imgs: Ref<string>): UseUploadImgReturnString
 export function useUploadImg(imgs: Ref<string[]>): UseUploadImgReturnArray
@@ -33,9 +53,9 @@ export function useUploadImg(imgs: Ref<string> | Ref<string[]>) {
       })
       const data = await promise
       if (Array.isArray(imgs.value)) {
-        imgs.value = [...imgs.value, data.filePath]
+        imgs.value = appendImageUrl(imgs.value, data.filePath)
       } else {
-        imgs.value = [...imgs.value.split(',').filter(Boolean), data.filePath].join(',')
+        imgs.value = appendImageUrl(imgs.value, data.filePath)
       }
     } catch (error) {
       console.error('上传失败:', error)
@@ -50,22 +70,14 @@ export function useUploadImg(imgs: Ref<string> | Ref<string[]>) {
   // 删除图片
   const handleDeleteImg = (urlStr: string) => {
     if (Array.isArray(imgs.value)) {
-      imgs.value = imgs.value.filter((item) => item !== urlStr)
+      imgs.value = removeImageUrl(imgs.value, urlStr)
     } else {
-      imgs.value =
-        imgs.value
-          .split(',')
-          .filter((item) => item !== urlStr)
-          .join(',') || ''
+      imgs.value = removeImageUrl(imgs.value, urlStr)
     }
   }
 
   const imgList = computed(() => {
-    if (Array.isArray(imgs.value)) {
-      return imgs.value
-    } else {
-      return imgs.value.split(',').filter(Boolean)
-    }
+    return toImageList(imgs.value)
   })
 
   if (Array.isArray(imgs.value)) {