src/renderer/src/AixPPTist/src/api/index.ts

@@ -11,7 +11,8 @@ import * as API_smarttalk from '@/api/file' // 相关api
 import * as useStore from '../store' // pptist-状态管理
 import { sessionStore } from '@/utils/store' // electron-store 状态管理
 import useUserStore from '@/store/modules/user' // 外部-用户信息
-
+import * as Api_server from '@/api/apiService' // 相关api
+import * as commUtils from '@/utils/comm.js'
 const slidesStore = useStore.useSlidesStore()
 const userStore = useUserStore()
 
@@ -184,6 +185,19 @@ export class PPTApi {
       else msgUtils.msgError(res.msg || '更新失败');return false
     })
   }
+
+  // 图片|音频|视频 转换为在线地址
+  static  toRousrceUrl =async (o:any) => {
+      const formData = new FormData()
+      formData.append('file', o)
+      const res = await Api_server.Other.uploadFile(formData)
+      if (res && res.code == 200){
+        const url = res?.url
+        url &&(o.src = url)
+        return url
+      }
+   
+}
 }
 
 export default PPTApi

src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/MediaInput.vue

@@ -7,19 +7,44 @@
     />
 
     <template v-if="type === 'video'">
-      <Input v-model:value="videoSrc" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
-      <div class="btns">
+      <el-tabs :tab-position="'left'"  class="demo-tabs" v-model="tabvalue">
+          <el-tab-pane label="常规"  >
+            <Input v-model:value="videoSrc" style="width:100%" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
+          </el-tab-pane>
+          <el-tab-pane label="上传" >
+            <FileInput accept="video/*"  @change="files => insertImageElementvideo(files)">
+                <div class="updivs">+点击上传视频</div>
+            </FileInput>
+          </el-tab-pane>
+        </el-tabs>
+
+      
+     
+      <div class="btns" v-if="tabvalue=='0'">
         <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
         <Button type="primary" @click="insertVideo()">确认</Button>
       </div>
     </template>
 
     <template v-if="type === 'audio'">
-      <Input v-model:value="audioSrc" placeholder="请输入音频地址，e.g. https://xxx.mp3"></Input>
-      <div class="btns">
+      <el-tabs :tab-position="'left'"  class="demo-tabs" v-model="tabvalue1">
+          <el-tab-pane label="常规"  >
+            <Input v-model:value="audioSrc" style="width:100%" placeholder="请输入音频地址，e.g. https://xxx.mp3"></Input>
+          </el-tab-pane>
+          <el-tab-pane label="上传" >
+            <FileInput accept="audio/*"  @change="files => insertImageElementaudio(files)">
+                <div class="updivs">+点击上传音频</div>
+            </FileInput>
+          </el-tab-pane>
+        </el-tabs>
+
+      <div class="btns" v-if="tabvalue1=='0'">
         <Button @click="emit('close')" style="margin-right: 10px;">取消</Button>
         <Button type="primary" @click="insertAudio()">确认</Button>
       </div>
+
+
+
     </template>
   </div>
 </template>
@@ -30,6 +55,8 @@ 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'
+import { PPTApi } from '../../../api'
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {
@@ -45,9 +72,33 @@ const emit = defineEmits<{
 
 const type = ref<TypeKey>('video')
 
-const videoSrc = ref('https://mazwai.com/videvo_files/video/free/2019-01/small_watermarked/181004_04_Dolphins-Whale_06_preview.webm')
-const audioSrc = ref('https://freesound.org/data/previews/614/614107_11861866-lq.mp3')
+const videoSrc = ref('')
+const audioSrc = ref('')
+// https://freesound.org/data/previews/614/614107_11861866-lq.mp3
+const tabvalue = ref('0')
+const tabvalue1 = ref('0')
 
+const insertImageElementvideo = (files: FileList) => {
+  console.log('files', files)
+  const imageFile = files[0]
+  if (!imageFile) return
+  PPTApi.toRousrceUrl(imageFile).then(data=>{
+    videoSrc.value=data
+    insertVideo()
+  })
+  
+}
+
+const insertImageElementaudio = (files: FileList) => {
+  console.log('files', files)
+  const imageFile = files[0]
+  if (!imageFile) return
+  PPTApi.toRousrceUrl(imageFile).then(data=>{
+    videoSrc.value=data
+    insertAudio()
+  })
+  
+}
 const tabs: TabItem[] = [
   { key: 'video', label: '视频' },
   { key: 'audio', label: '音频' },
@@ -74,4 +125,33 @@ const insertAudio = () => {
   margin-top: 10px;
   text-align: right;
 }
+.updivs{
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 100px;
+  cursor: pointer;
+}
+.demo-tabs{
+  :deep(.el-tabs__content){
+    display: flex;
+    align-items: center;
+    div{
+      width: 100%;
+    }
+  }
+  :deep( .el-tabs__item.is-active) {
+    color: #d14424;
+    }
+    :deep( .el-tabs__item:hover) {
+    color: #d14424;
+    }
+:deep(.el-tabs__active-bar) {
+  background-color:  #d14424; 
+  height: 3px; 
+}
+}
 </style>

src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue

@@ -156,7 +156,7 @@ import Popover from '../../../components/Popover.vue'
 import PopoverMenuItem from '../../../components/PopoverMenuItem.vue'
 import QuestToPPTist from '@/views/classTask/newClassTaskAssign/questToPPTist/index.vue'
 import MaterialDialog from './MaterialDialog.vue'
-
+import { PPTApi } from '../../../api'
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
 const { canUndo, canRedo } = storeToRefs(useSnapshotStore())
@@ -188,9 +188,16 @@ const {
 } = useCreateElement()
 
 const insertImageElement = (files: FileList) => {
+  console.log('files', files)
   const imageFile = files[0]
   if (!imageFile) return
-  getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
+  // 上传图片转为线上地址
+  PPTApi.toRousrceUrl(imageFile).then(data=>{
+    createImageElement(data)
+  })
+  // getImageDataURL(imageFile).then(dataURL => {
+    // createImageElement(dataURL)
+  // })
 }
 
 const onhtml2canvas = (imgbs64: string) => {