feat: 支持上传本地音视频

Author: hy16657

src/hooks/useCreateElement.ts

@@ -2,7 +2,7 @@ import { storeToRefs } from 'pinia'
 import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
 import { getImageSize } from '@/utils/image'
-import type { PPTLineElement, PPTElement, TableCell, TableCellStyle, PPTShapeElement, ChartType } from '@/types/slides'
+import type { PPTLineElement, PPTElement, TableCell, TableCellStyle, PPTShapeElement, ChartType, PPTVideoElement, PPTAudioElement } from '@/types/slides'
 import { type ShapePoolItem, SHAPE_PATH_FORMULAS } from '@/configs/shapes'
 import type { LinePoolItem } from '@/configs/lines'
 import { CHART_DEFAULT_DATA } from '@/configs/chart'
@@ -276,8 +276,8 @@ export default () => {
    * 创建视频元素
    * @param src 视频地址
    */
-  const createVideoElement = (src: string) => {
-    createElement({
+  const createVideoElement = (src: string, ext?: string) => {
+    const newElement: PPTVideoElement = {
       type: 'video',
       id: nanoid(10),
       width: 500,
@@ -287,15 +287,17 @@ export default () => {
       top: (viewportSize.value * viewportRatio.value - 300) / 2,
       src,
       autoplay: false,
-    })
+    }
+    if (ext) newElement.ext = ext
+    createElement(newElement)
   }
 
   /**
    * 创建音频元素
    * @param src 音频地址
    */
-  const createAudioElement = (src: string) => {
-    createElement({
+  const createAudioElement = (src: string, ext?: string) => {
+    const newElement: PPTAudioElement = {
       type: 'audio',
       id: nanoid(10),
       width: 50,
@@ -308,7 +310,9 @@ export default () => {
       fixedRatio: true,
       color: theme.value.themeColors[0],
       src,
-    })
+    }
+    if (ext) newElement.ext = ext
+    createElement(newElement)
   }
 
   return {

src/views/Editor/CanvasTool/MediaInput.vue

@@ -9,16 +9,26 @@
     <template v-if="type === 'video'">
       <Input v-model:value="videoSrc" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
       <div class="btns">
-        <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
-        <Button type="primary" @click="insertVideo()">确认</Button>
+        <FileInput accept="video/*" @change="files => uploadVideo(files)">
+          <Button>上传本地视频</Button>
+        </FileInput>
+        <div class="group">
+          <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
+          <Button type="primary" @click="insertVideo()">确认</Button>
+        </div>
       </div>
     </template>
 
     <template v-if="type === 'audio'">
       <Input v-model:value="audioSrc" placeholder="请输入音频地址，e.g. https://xxx.mp3"></Input>
       <div class="btns">
-        <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
-        <Button type="primary" @click="insertAudio()">确认</Button>
+        <FileInput accept="audio/*" @change="files => uploadAudio(files)">
+          <Button>上传本地音频</Button>
+        </FileInput>
+        <div class="group">
+          <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
+          <Button type="primary" @click="insertAudio()">确认</Button>
+        </div>
       </div>
     </template>
   </div>
@@ -30,6 +40,34 @@ import message from '@/utils/message'
 import Tabs from '@/components/Tabs.vue'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
+import FileInput from '@/components/FileInput.vue'
+
+const MIME_MAP: { [key: string]: string } = {
+
+  // 音频类型
+  'audio/aac': 'aac',
+  'audio/mpeg': 'mp3',
+  'audio/ogg': 'oga',
+  'audio/wav': 'wav',
+  'audio/webm': 'weba',
+  'audio/flac': 'flac',
+  'audio/mp4': 'm4a',
+  'audio/x-aiff': 'aif',
+  'audio/x-ms-wma': 'wma',
+  'audio/midi': 'mid',
+
+  // 视频类型
+  'video/mp4': 'mp4',
+  'video/mpeg': 'mpeg',
+  'video/ogg': 'ogv',
+  'video/webm': 'webm',
+  'video/x-msvideo': 'avi',
+  'video/quicktime': 'mov',
+  'video/x-ms-wmv': 'wmv',
+  'video/x-flv': 'flv',
+  'video/3gpp': '3gp',
+  'video/3gpp2': '3g2'
+}
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {
@@ -38,8 +76,8 @@ interface TabItem {
 }
 
 const emit = defineEmits<{
-  (event: 'insertVideo', payload: string): void
-  (event: 'insertAudio', payload: string): void
+  (event: 'insertVideo', payload: { src: string, ext?: string }): void
+  (event: 'insertAudio', payload: { src: string, ext?: string }): void
   (event: 'close'): void
 }>()
 
@@ -55,12 +93,26 @@ const tabs: TabItem[] = [
 
 const insertVideo = () => {
   if (!videoSrc.value) return message.error('请先输入正确的视频地址')
-  emit('insertVideo', videoSrc.value)
+  emit('insertVideo', { src: videoSrc.value })
 }
 
 const insertAudio = () => {
   if (!audioSrc.value) return message.error('请先输入正确的音频地址')
-  emit('insertAudio', audioSrc.value)
+  emit('insertAudio', { src: audioSrc.value })
+}
+
+const uploadVideo = (files: FileList) => {
+  const file = files[0]
+  if (!file) return
+  const ext = MIME_MAP[file.type] || ''
+  emit('insertVideo', { src: URL.createObjectURL(file), ext })
+}
+
+const uploadAudio = (files: FileList) => {
+  const file = files[0]
+  if (!file) return
+  const ext = MIME_MAP[file.type] || ''
+  emit('insertAudio', { src: URL.createObjectURL(file), ext })
 }
 </script>
 
@@ -70,6 +122,7 @@ const insertAudio = () => {
 }
 .btns {
   margin-top: 10px;
-  text-align: right;
+  display: flex;
+  justify-content: space-between;
 }
 </style>

src/views/Editor/CanvasTool/index.vue

@@ -75,8 +75,8 @@
         <template #content>
           <MediaInput 
             @close="mediaInputVisible = false"
-            @insertVideo="src => { createVideoElement(src); mediaInputVisible = false }"
-            @insertAudio="src => { createAudioElement(src); mediaInputVisible = false }"
+            @insertVideo="({ src, ext }) => { createVideoElement(src, ext); mediaInputVisible = false }"
+            @insertAudio="({ src, ext }) => { createAudioElement(src, ext); mediaInputVisible = false }"
           />
         </template>
         <IconVideoTwo class="handler-item" v-tooltip="'插入音视频'" />