feat(src/packages): 组合里单个摄像头新增封面上传

 <template>
 <template>
   <div class="videoPlay">
   <div class="videoPlay">
-    <video crossOrigin="anonymous" ref="videoRef" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+    <video
+      style="object-fit: cover"
+      :poster="poster"
+      crossOrigin="anonymous"
+      ref="videoRef"
+      class="video-js vjs-default-skin vjs-big-play-centered"
+      controls
+    >
       <source :src="path" />
       <source :src="path" />
     </video>
     </video>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch, toRefs } from 'vue'
 import videojs, { VideoJsPlayer } from 'video.js'
 import videojs, { VideoJsPlayer } from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.css'
 import 'video.js/dist/video-js.css'
@@ -17,6 +24,7 @@ const props = withDefaults(
     path: string
     path: string
     autoPlay?: boolean
     autoPlay?: boolean
     h?: number
     h?: number
+    poster?: string
   }>(),
   }>(),
   { autoPlay: false }
   { autoPlay: false }
 )
 )
@@ -33,19 +41,22 @@ const initPlay = async () => {
     controls: true,
     controls: true,
     autoplay: props.autoPlay,
     autoplay: props.autoPlay,
     src: props?.path,
     src: props?.path,
+    poster: props?.poster,
     language: 'zh-CN',
     language: 'zh-CN',
-    techOrder: ['html5']
+    techOrder: ['html5'],
+    preload: 'none'
   }
   }
   player = videojs(videoRef.value, options, () => {
   player = videojs(videoRef.value, options, () => {
-    videojs.log('播放器已经准备好了!')
+    videojs.log('Video is reading')
     if (props.autoPlay) {
     if (props.autoPlay) {
       player.play()
       player.play()
     }
     }
     player.on('ended', () => {
     player.on('ended', () => {
-      videojs.log('播放结束了!')
+      videojs.log('Play end')
     })
     })
     player.on('error', () => {
     player.on('error', () => {
-      videojs.log('播放器解析出错!')
+      player.errorDisplay.close()
+      videojs.log('Play parse error')
     })
     })
   })
   })
 }
 }
@@ -58,10 +69,10 @@ onMounted(() => {
 watch(
 watch(
   () => props.path,
   () => props.path,
   () => {
   () => {
-    player?.pause()
-    player?.src(props.path)
-    player?.load()
-    if (props.path) {
+    if (props.path && props.autoPlay) {
+      player?.pause()
+      player?.load()
+      player?.src(props.path)
       player?.play()
       player?.play()
     }
     }
   },
   },
@@ -74,11 +85,15 @@ onBeforeUnmount(() => {
   player?.dispose()
   player?.dispose()
 })
 })
 </script>
 </script>
+<style>
+.vjs-poster {
+  background-size: cover !important;
+}
+</style>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .videoPlay {
 .videoPlay {
   flex: 1;
   flex: 1;
   height: v-bind('`${h}px`');
   height: v-bind('`${h}px`');
-
   .video-js {
   .video-js {
     height: 100%;
     height: 100%;
     width: 100%;
     width: 100%;

@@ -6,6 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
 export const option = {
   dataset: '',
   dataset: '',
   autoplay: false,
   autoplay: false,
+  poster: ''
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
 <template>
   <CollapseItem name="播放器配置" :expanded="true">
   <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>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="源地址" :alone="true">
     <setting-item-box name="源地址" :alone="true">
       <setting-item>
       <setting-item>
         <n-input-group>
         <n-input-group>
@@ -16,14 +38,94 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, nextTick } from 'vue'
 import { option } from './config'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 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'
 
 
-defineProps({
+const props = defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,
     required: true
     required: true
   }
   }
 })
 })
+
+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 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('添加图片失败，请稍后重试！')
+    }
+  })
+}
 </script>
 </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>

 <template>
 <template>
   <div>
   <div>
-    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" />
+    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="option.poster" />
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
@@ -18,10 +18,11 @@ const props = defineProps({
 
 
 const { h } = toRefs(props.chartConfig.attr)
 const { h } = toRefs(props.chartConfig.attr)
 
 
-const { autoplay, dataset } = toRefs(props.chartConfig.option)
+const { autoplay, dataset, poster } = toRefs(props.chartConfig.option)
 
 
 const option = shallowReactive({
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: configOption.dataset,
+  poster: configOption.poster
 })
 })
 
 
 watch(
 watch(
@@ -30,7 +31,17 @@ watch(
     option.dataset = newData
     option.dataset = newData
   },
   },
   {
   {
-    immediate: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => poster?.value,
+  (newData: string) => {
+    option.poster = newData
+  },
+  {
+    immediate: true
   }
   }
 )
 )
 </script>
 </script>