音视频 上传

src/api/user.ts

@@ -1,9 +1,19 @@
 import { httpAxios } from "@/api/ApiInstance"
 
 //获取用户信息
-export const getUserInfo = () => {
+export const getUserInfoApi = () => {
   return httpAxios.axioseRquest({
     method: "get",
     url: "/edu-app/user/getUserInfo"
   })
 }
+
+//获取上传信息
+export const getUploadSignApi = (data: any, params: any) => {
+  return httpAxios.axioseRquest({
+    method: "post",
+    url: "/edu-app/open/getUploadSign",
+    data,
+    params
+  })
+}

src/store/user.ts

@@ -3,7 +3,7 @@ import { removeToken, setToken, setCODE401 } from "@/libs/auth"
 import router from "@/router"
 import { httpAjax } from "@/plugins/httpAjax"
 import { store } from "./index"
-import { getUserInfo } from "@/api/user"
+import { getUserInfoApi } from "@/api/user"
 interface userType {
   userInfo: {
     username?: string
@@ -34,7 +34,7 @@ const useStore = defineStore("user", {
     },
     /** 获取用户信息 */
     async getUserInfo() {
-      const userInfoRes = await httpAjax(getUserInfo)
+      const userInfoRes = await httpAjax(getUserInfoApi)
       if (userInfoRes.code !== 200) {
         return Promise.reject(userInfoRes)
       }

src/utils/oss-file-upload.ts

@@ -1,20 +1,41 @@
-import COS from 'cos-js-sdk-v5'
+import COS from "cos-js-sdk-v5"
+import { getUploadSignApi } from "@/api/user"
+import { httpAjax } from "@/plugins/httpAjax"
+import loadingBar from "@/plugins/loadingBar"
 
-const tencentBucket = 'daya-online-1303457149'
-const ossType = 'tencent'
+const tencentBucket = "daya-online-1303457149"
+const ossType = "tencent"
 
-export async function fileUpload(fileName: string, file: Blob) {
-  const { data } = await getUploadSign(fileName)
-  return await onOnlyFileUpload(data.signature, {
-    fileName,
-    file
-  })
+export default async function fileUpload(fileName: string, file: Blob) {
+  loadingBar.loading(true, "资源上传中")
+  const resUploadSign = await getUploadSign(fileName)
+  if (resUploadSign.code === 200) {
+    try {
+      const resUpload = await onOnlyFileUpload(resUploadSign.data.signature, {
+        fileName,
+        file
+      })
+      loadingBar.loading(false)
+      if (resUpload.statusCode === 200) {
+        return resUpload.Location.includes("http") ? resUpload.Location : `https://${resUpload.Location}`
+      } else {
+        return Promise.reject("")
+      }
+    } catch {
+      loadingBar.loading(false)
+      return Promise.reject("")
+    }
+  } else {
+    loadingBar.loading(false)
+    return Promise.reject("")
+  }
 }
 
 const getUploadSign = async (fileName: string) => {
-  const fileUrl = 'yjl/' + fileName
-  return request.post('/getUploadSign', {
-    data: {
+  const fileUrl = "pptList/" + fileName
+  return httpAjax(
+    getUploadSignApi,
+    {
       postData: {
         key: fileUrl
       },
@@ -22,46 +43,27 @@ const getUploadSign = async (fileName: string) => {
       bucketName: tencentBucket,
       filename: fileUrl
     },
-    requestType: 'json',
-    params: { pluginName: ossType }
-  })
+    { pluginName: ossType }
+  )
 }
 
-const onOnlyFileUpload = async (signature: string, params: { fileName: string; file: Blob }) => {
-  let file = ''
-  let errorObj: any = null
+const onOnlyFileUpload = (signature: string, params: { fileName: string; file: Blob }) => {
   const cos = new COS({
-    Domain: 'https://oss.dayaedu.com',
-    Protocol: 'https',
+    Domain: "https://oss.dayaedu.com",
+    Protocol: "https",
     getAuthorization: async (options, callback: any) => {
       callback({ Authorization: signature })
     }
   })
-  await cos
-    .uploadFile({
-      Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
-      Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
-      Key: `yjl/${params.fileName}`,
-      /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
-      Body: params.file, // 上传文件对象
-      SliceSize: 1024 * 1024 * 500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
-      onProgress: function (progressData) {
-        // onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) })
-      }
-    })
-    .then((res: any) => {
-      if (res.Location?.indexOf('http') >= 0) {
-        file = res.Location
-      } else {
-        file = 'https://' + res.Location
-      }
-    })
-    .catch((error: any) => {
-      errorObj = error
-    })
-  if (file) {
-    return file
-  } else {
-    throw new Error(errorObj)
-  }
+  return cos.uploadFile({
+    Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+    Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
+    Key: `pptList/${params.fileName}`,
+    /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+    Body: params.file, // 上传文件对象
+    SliceSize: 1024 * 1024 * 500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+    onProgress: function (progressData) {
+      // onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) })
+    }
+  })
 }

src/views/Editor/CanvasTool/MediaInput.vue

@@ -1,75 +1,95 @@
 <template>
   <div class="media-input">
-    <Tabs 
-      :tabs="tabs" 
-      v-model:value="type" 
-      :tabsStyle="{ marginBottom: '15px' }" 
-    />
-
+    <Tabs :tabs="tabs" v-model:value="type" :tabsStyle="{ marginBottom: '15px' }" />
     <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>
-      </div>
+      <ElUpload
+        class="uploadCon"
+        action=""
+        :show-file-list="false"
+        accept=".mp4,.avi,.flv"
+        :http-request="
+          (fileData: any) => {
+            handleUpload('video', fileData)
+            return undefined
+          }
+        "
+      >
+        <Button type="primary">上传视频</Button>
+      </ElUpload>
     </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>
-      </div>
+      <ElUpload
+        class="uploadCon"
+        action=""
+        :show-file-list="false"
+        accept=".mp3,.wav,.m4a"
+        :http-request="
+          (fileData: any) => {
+            handleUpload('audio', fileData)
+            return undefined
+          }
+        "
+      >
+        <Button type="primary">上传音频</Button>
+      </ElUpload>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import message from '@/utils/message'
-import Tabs from '@/components/Tabs.vue'
-import Input from '@/components/Input.vue'
-import Button from '@/components/Button.vue'
+import { ref } from "vue"
+import message from "@/utils/message"
+import Tabs from "@/components/Tabs.vue"
+import Button from "@/components/Button.vue"
+import { ElUpload, ElButton, ElMessage, type UploadRequestOptions } from "element-plus"
+import fileUpload from "@/utils/oss-file-upload"
 
-type TypeKey = 'video' | 'audio'
+type TypeKey = "video" | "audio"
 interface TabItem {
   key: TypeKey
   label: string
 }
 
 const emit = defineEmits<{
-  (event: 'insertVideo', payload: string): void
-  (event: 'insertAudio', payload: string): void
-  (event: 'close'): void
+  (event: "insertVideo", payload: string): void
+  (event: "insertAudio", payload: string): void
+  (event: "close"): void
 }>()
 
-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 type = ref<TypeKey>("video")
 const tabs: TabItem[] = [
-  { key: 'video', label: '视频' },
-  { key: 'audio', label: '音频' },
+  { key: "video", label: "视频" },
+  { key: "audio", label: "音频" }
 ]
 
-const insertVideo = () => {
-  if (!videoSrc.value) return message.error('请先输入正确的视频地址')
-  emit('insertVideo', videoSrc.value)
-}
-
-const insertAudio = () => {
-  if (!audioSrc.value) return message.error('请先输入正确的音频地址')
-  emit('insertAudio', audioSrc.value)
+async function handleUpload(type: TypeKey, fileData: UploadRequestOptions) {
+  fileUpload(fileData.file.name, fileData.file)
+    .then(res => {
+      if (type === "audio") {
+        emit("insertAudio", res)
+      } else {
+        emit("insertVideo", res)
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        showClose: true,
+        message: "上传失败!",
+        type: "error"
+      })
+    })
 }
 </script>
 
 <style lang="scss" scoped>
 .media-input {
-  width: 480px;
-}
-.btns {
-  margin-top: 10px;
-  text-align: right;
+  width: 120px;
+  & :deep(.tabs) {
+    justify-content: center;
+  }
+  .uploadCon {
+    text-align: center;
+  }
 }
 </style>