feat(src/packages): 优化封装上传图片组件，移除重复代码

+import TKUpload from './index.vue';
+
+export { TKUpload };

+<template>
+  <n-upload
+    v-model:file-list="fileList"
+    :show-file-list="true"
+    :customRequest="customRequest"
+    :onBeforeUpload="beforeUploadHandle"
+    :onRemove="remove"
+  >
+    <n-upload-dragger>
+      <img v-if="uploadImageUrl" class="upload-show" :src="uploadImageUrl" alt="上传的图片" />
+      <div class="upload-img" v-show="!uploadImageUrl">
+        <img src="@/assets/images/canvas/noImage.png" />
+        <n-text class="upload-desc" depth="3">
+          上传文件需小于 {{ uploadSizeFormat.size }}M ，格式为 {{ uploadSizeFormat.format }} 的文件
+        </n-text>
+      </div>
+    </n-upload-dragger>
+  </n-upload>
+</template>
+
+<script lang="ts" setup name="TKUpload">
+import { ref, PropType, nextTick } from 'vue'
+import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui'
+import { fetchRouteParamsLocation } from '@/utils'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { FileTypeEnum } from '@/enums/external/fileTypeEnum'
+
+interface uploadSizeFormatIF {
+  size: number
+  format: string
+}
+
+const props = defineProps({
+  uploadImageUrl: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  uploadSizeFormat: {
+    type: Object as PropType<uploadSizeFormatIF>,
+    default: () => ({
+      size: 5,
+      format: 'png/jpg/jpeg/gif'
+    })
+  }
+})
+
+const emit = defineEmits(['sendFile', 'removeFile'])
+
+const fileList = ref<UploadFileInfo[]>()
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_upload.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (!uploadRes) return
+      emit('sendFile', uploadRes?.fileStaticUri)
+      window['$message'].success('上传文件成功！')
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
+
+// 文件上传前置处理
+const beforeUploadHandle = (file: UploadFileInfo) => {
+  fileList.value = []
+  const type = file.file?.type
+  const size = file.file?.size as number
+  const typeSuffix = type?.split('/')?.at(-1)?.toUpperCase() as keyof typeof FileTypeEnum
+  if (size > 1024 * 1024 * props.uploadSizeFormat.size) {
+    window['$message'].warning(`文件超出 ${props.uploadSizeFormat.size}M限制，请重新上传！`)
+    return false
+  }
+  if (!FileTypeEnum[typeSuffix]) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+//单个点击删除
+const remove = () => {
+  fileList.value = []
+  emit('removeFile', true)
+}
+</script>
+
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+@include deep() {
+  .n-card__content {
+    padding: 0;
+    overflow: hidden;
+  }
+  .n-upload-dragger {
+    padding: 5px;
+  }
+}
+.upload-show {
+  width: -webkit-fill-available;
+  height: $uploadHeight;
+  border-radius: 5px;
+}
+.upload-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {
+    height: 150px;
+  }
+  .upload-desc {
+    padding: 10px 0;
+  }
+}
+</style>

+// 文件上传时的格式映射
+export enum FileTypeEnum {
+  // 文档
+  TXT = 'text/plain',
+  JSON = 'application/json',
+  // 图片
+  PNG = 'image/png',
+  JPEG = 'image/jpeg',
+  JPG = 'image/jpg',
+  GIF = 'image/gif',
+}

@@ -2,24 +2,11 @@
   <collapse-item name="属性" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
-              <div class="upload-img" v-show="!optionData.dataset">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload
+          :uploadImageUrl="props.optionData.dataset"
+          @sendFile="handleSendFile"
+          @removeFile="handleRemoveFile"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="样式">
@@ -39,14 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick } from 'vue'
+import { PropType } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { TKUpload } from '@/components/external/Common/TKUpload'
 
 const props = defineProps({
   optionData: {
@@ -55,48 +38,12 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.dataset = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.dataset = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.dataset = '') : null)
 
 // 适应类型
 const fitList = [
@@ -122,35 +69,3 @@ const fitList = [
   }
 ]
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>

@@ -58,9 +58,7 @@ const isRtspProtocol = (url: string) => {
 const getVideoTypeByUrl = (url = '') => {
   try {
     const { protocol, pathname } = new URL(url)
-
     if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
-
     const reg = /[^.]\w*$/
     const mathValue = pathname.match(reg) || []
     const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
@@ -112,11 +110,9 @@ const { getResult } = useFingerprint()
 async function getSource() {
   fingerprintResult.value = await getResult()
   let src = props.sourceSrc || ''
-
   if (isRtspProtocol(props.sourceSrc!)) {
     src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
   }
-
   return [
     {
       type: getVideoTypeByUrl(props.sourceSrc),

@@ -2,29 +2,12 @@
   <CollapseItem name="播放器配置" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.poster" class="upload-show" :src="optionData.poster" alt="背景" />
-              <div class="upload-img" v-show="!optionData.poster">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload :uploadImageUrl="optionData.poster" @sendFile="handleSendFile" @removeFile="handleRemoveFile" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="源类型" :alone="true">
       <setting-item>
-        <n-radio-group @change="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
+        <n-radio-group @update:value="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
           <n-space>
             <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value">
               {{ item.label }}
@@ -55,7 +38,12 @@
     </setting-item-box>
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
       <setting-item>
-        <n-select @update:value="handleSelect" v-model:value="optionData.dataset" :options="videoOptions" />
+        <n-select
+          @update:value="handleSelect"
+          v-model:value="optionData.dataset"
+          :options="videoOptions"
+          placeholder="请选择视频地址"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="自动播放">
@@ -67,15 +55,21 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick, onMounted } from 'vue'
+import { PropType, ref, onMounted } from 'vue'
 import { option, sourceTypeEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { NTreeSelect } from 'naive-ui'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
+import { TKUpload } from '@/components/external/Common/TKUpload'
+
+interface videoListIF {
+  name: string
+  accessMode: number
+  id: string
+  videoUrl: string
+  label: string
+  value: string
+}
 
 const props = defineProps({
   optionData: {
@@ -84,8 +78,6 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
 const sourceTypes = [
   {
     value: 'custom',
@@ -99,7 +91,7 @@ const sourceTypes = [
 
 const originationOption = ref([])
 
-const videoOptions = ref([])
+const videoOptions = ref<videoListIF[]>([])
 
 const getOriginationList = async () => {
   const res = await getOrganizationList()
@@ -113,7 +105,8 @@ const handleUpdateTreeValue = (value: string) => {
 
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({
+  if (!res) return
+  videoOptions.value = res?.data?.map((item: videoListIF) => ({
     label: item.name,
     value: item.accessMode === 1 ? item.id : item.videoUrl,
     id: item.id,
@@ -128,16 +121,16 @@ const getVideoUrlById = async (id: string) => {
   props.optionData.url = url
 }
 
-const handleChecked = ({ target }: any) => {
+const handleChecked = (value: string) => {
   props.optionData.dataset = ''
-  const { value } = target
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
   }
 }
 
-const handleSelect = (value: string, e: any) => {
+const handleSelect = (_: string, e: videoListIF) => {
   const { accessMode, id } = e
+  //1表示，需要从服务端调取接口换取播放的地址，0则不需要
   if (accessMode === 1) {
     getVideoUrlById(id)
   } else {
@@ -154,76 +147,10 @@ onMounted(() => {
   }
 })
 
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.poster = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.poster = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.poster = '') : null)
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>