updates

src/modules/resource/video/components/UploadMultipleVideo.vue

+<script setup lang="ts">
+import VideoDetail from './VideoDetail.vue'
+import { getCreateAuth, updateAuth } from '@/api/base'
+import { ElMessage } from 'element-plus'
+const idShowMore = ref(false)
+const props = defineProps({
+  createFlag: {
+    type: Number
+  }
+})
+/**
+ * upload 上传状态  {code: -1（待上传）0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
+ * progress 上传进度
+ **/
+interface IUpload {
+  id?: number
+  code: number
+  name?: string
+  msg?: string
+  progress?: number
+  videoId?: string
+}
+let uploadData = $ref<IUpload>({ code: -1 })
+let uploadData1 = $ref<IUpload[]>([])
+
+const emit = defineEmits(['upload', 'canClose'])
+const form: any = reactive({
+  timeout: '',
+  partSize: '',
+  parallel: '',
+  retryCount: '',
+  retryDuration: '',
+  region: 'cn-shanghai',
+  userId: '1303984639806000',
+  file: null,
+  authProgress: 0,
+  uploader: null,
+  statusText: ''
+})
+const fileChange = (e: any) => {
+  if (props.createFlag === 1) {
+    form.file = e.target.files[0]
+    if (form.file.name.indexOf('.mp4') === -1) {
+      ElMessage.warning('请上传mp4格式视频')
+      return
+    }
+    var userData = '{"Vod":{}}'
+    if (form.uploader) {
+      form.uploader.stopUpload()
+      form.authProgress = 0
+      form.statusText = ''
+    }
+    form.uploader = createUploader()
+    form.uploader.addFile(form.file, null, null, null, userData)
+    form.uploader.startUpload()
+  } else {
+    console.log(e.target.files)
+    form.file = e.target.files
+    form.file.forEach((item: any) => {
+      if (item.name.indexOf('.mp4') === -1) {
+        ElMessage('请上传mp4格式视频')
+      } else {
+        var userData = '{"Vod":{}}'
+        if (form.uploader) {
+          form.uploader.stopUpload()
+          form.authProgress = 0
+          form.statusText = ''
+        }
+        setTimeout(() => {
+          form.uploader = createUploader()
+          form.uploader.addFile(item, null, null, null, userData)
+          form.uploader.startUpload()
+        }, 1000)
+      }
+    })
+  }
+}
+let id = ref(0)
+const createUploader: any = () => {
+  const w = window as any
+  // for
+  const uploader = new w.AliyunUpload.Vod({
+    timeout: form.timeout || 60000,
+    partSize: form.partSize || 1048576,
+    parallel: form.parallel || 5,
+    retryCount: form.retryCount || 3,
+    retryDuration: form.retryDuration || 2,
+    region: form.region,
+    userId: form.userId,
+    // 开始上传
+    onUploadstarted: function (uploadInfo: any) {
+      console.log(window.localStorage.fileData)
+      const fileData = JSON.parse(window.localStorage.fileData || '{}')
+      console.log(fileData.sourceId)
+      // 判断有没有上传过
+      const isFile = !!fileData.sourceId
+      if (!isFile) {
+        // 没上传过请求凭证上传
+        getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
+          window.localStorage.fileData = JSON.stringify({
+            uploadAuth: data.data.upload_auth,
+            uploadAddress: data.data.upload_address,
+            videoId: data.data.source_id,
+            fileName: uploadInfo.file.name,
+            fileSize: uploadInfo.file.size
+          })
+          uploader.setUploadAuthAndAddress(
+            uploadInfo,
+            data.data.upload_auth,
+            data.data.upload_address,
+            data.data.source_id
+          )
+        })
+      } else {
+        console.log(fileData, uploadInfo)
+        // 上传过判断一下上次上传的文件和本次上传的文件一不一样，一样的话继续上传
+        if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) {
+          uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
+        } else {
+          getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
+            uploader.setUploadAuthAndAddress(
+              uploadInfo,
+              data.data.upload_auth,
+              data.data.upload_address,
+              data.data.source_id
+            )
+          })
+        }
+      }
+      if (props.createFlag === 1) {
+        uploadData = {
+          code: 1,
+          name: uploadInfo.file.name,
+          msg: '开始上传'
+        }
+      } else {
+        uploadData1.push({
+          code: 1,
+          name: uploadInfo.file.name,
+          msg: '开始上传'
+        })
+        emit('canClose', { closeStatus: false })
+      }
+    },
+    // 文件上传成功
+    onUploadSucceed: function (uploadInfo: any) {
+      const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
+      if (props.createFlag === 1) {
+        uploadData = {
+          code: 0,
+          name: uploadInfo.file.name,
+          videoId: fileData.videoId,
+          msg: '上传成功'
+        }
+      } else {
+        const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
+        uploadData1[findIndex] = {
+          code: 0,
+          name: uploadInfo.file.name,
+          videoId: fileData.videoId,
+          msg: '上传成功'
+        }
+      }
+      emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
+      emit('canClose', { closeStatus: true })
+    },
+    // 文件上传失败
+    // code:any, message:any
+    onUploadFailed: function (uploadInfo: any) {
+      if (props.createFlag === 1) {
+        uploadData = {
+          code: 2,
+          name: uploadInfo.file.name,
+          msg: '文件上传失败'
+        }
+      } else {
+        const findIndex = uploadData1.findIndex(item => item.id === id.value)
+        uploadData1[findIndex] = {
+          id: id.value,
+          code: 2,
+          name: uploadInfo.file.name,
+          msg: '文件上传失败'
+        }
+      }
+    },
+    // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
+    onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
+      let progressPercent = Math.ceil(progress * 100)
+      form.authProgress = progressPercent
+      if (props.createFlag === 1) {
+        uploadData.progress = progressPercent
+      } else {
+        const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
+        uploadData1[findIndex].progress = progressPercent
+      }
+    },
+    // 上传凭证超时
+    onUploadTokenExpired: function (uploadInfo: any) {
+      const fileData = JSON.parse(window.localStorage.fileData || '{}')
+      updateAuth({ source_id: fileData.videoId }).then(({ data }) => {
+        let uploadAuth = data.UploadAuth
+        window.localStorage.fileData = JSON.stringify({
+          uploadAuth: data.data.upload_auth,
+          uploadAddress: data.data.upload_address,
+          videoId: data.data.source_id,
+          fileName: uploadInfo.file.name,
+          fileSize: uploadInfo.file.size
+        })
+        uploader.resumeUploadWithAuth(uploadAuth)
+      })
+    }
+  })
+  return uploader
+}
+const handleView = () => {
+  idShowMore.value = true
+}
+</script>
+<template>
+  <div v-if="props.createFlag === 1">
+    <div class="upload-video">
+      <div class="upload-btn">
+        本地文件
+        <!-- accept=".mp4" -->
+        <input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" />
+      </div>
+      <div class="demo-progress" v-if="uploadData.code === 1">
+        <el-progress style="width: 340px" :percentage="uploadData.progress" />
+      </div>
+      <div class="error video-info" v-if="uploadData.code === 2">
+        <div class="name">上传失败（请重新选择文件进行上传）</div>
+      </div>
+      <div class="video-info" v-if="uploadData.code === 0">
+        <div class="name">{{ uploadData.name }}</div>
+      </div>
+    </div>
+    <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
+  </div>
+  <div v-else>
+    <div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">
+      <div class="upload-btn">
+        本地文件
+        <input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" multiple />
+      </div>
+      <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
+
+      <div v-for="(item, index) in uploadData1" :key="index" style="display: flex; flex-direction: column">
+        <div class="demo-progress" v-if="item.code === 1">
+          <span style="min-width: 340px">{{ item.name }}</span>
+          <el-progress style="width: 200px" :percentage="item.progress" />
+        </div>
+        <div class="error video-info" v-if="item.code === 2">
+          <div class="name">上传失败（请重新选择文件进行上传）</div>
+        </div>
+        <div class="video-info" v-if="item.code === 0">
+          <div class="name1">{{ item.name }}</div>
+        </div>
+      </div>
+      <el-link type="primary" v-if="uploadData1.length > 3" @click="handleView"
+        >共{{ uploadData1.length }}个文件，查看更多</el-link
+      >
+    </div>
+  </div>
+  <VideoDetail :videoList="uploadData1" v-model:idShowMore="idShowMore" v-if="idShowMore === true" />
+</template>
+<style lang="scss">
+.demo-progress {
+  min-width: 350px;
+  display: flex;
+  span {
+    color: #999999;
+    font-size: 14px;
+    transform: translateX(-20px);
+  }
+}
+#fileUpload {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.00001;
+}
+.tips {
+  font-size: 12px;
+  line-height: 100%;
+  color: #999999;
+  margin-top: 8px;
+}
+.upload-video {
+  display: flex;
+  align-items: center;
+  .upload-btn {
+    position: relative;
+    width: 94px;
+    line-height: 36px;
+    background: rgba(250, 223, 230, 0.39);
+    border: 1px solid #aa1941;
+    border-radius: 20px;
+    font-size: 14px;
+    color: #aa1941;
+    margin-right: 30px;
+    text-align: center;
+  }
+  .video-info {
+    display: flex;
+    .name {
+      color: #333333;
+      font-size: 16px;
+      line-height: 100%;
+    }
+    .name1 {
+      color: #aa1941;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .view {
+      font-size: 16px;
+      line-height: 100%;
+      color: #399ee8;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/modules/resource/video/components/UploadVideo.vue

 <script setup lang="ts">
-import VideoDetail from './VideoDetail.vue'
 import { getCreateAuth, updateAuth } from '@/api/base'
 import { ElMessage } from 'element-plus'
-const idShowMore = ref(false)
-const props = defineProps({
-  createFlag: {
-    type: Number
-  }
-})
 /**
  * upload 上传状态  {code: -1（待上传）0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
  * progress 上传进度
  **/
 interface IUpload {
-  id?: number
   code: number
   name?: string
   msg?: string
@@ -21,9 +13,8 @@ interface IUpload {
   videoId?: string
 }
 let uploadData = $ref<IUpload>({ code: -1 })
-let uploadData1 = $ref<IUpload[]>([])
 
-const emit = defineEmits(['upload', 'canClose'])
+const emit = defineEmits(['upload'])
 const form: any = reactive({
   timeout: '',
   partSize: '',
@@ -38,48 +29,24 @@ const form: any = reactive({
   statusText: ''
 })
 const fileChange = (e: any) => {
-  if (props.createFlag === 1) {
-    form.file = e.target.files[0]
-    if (form.file.name.indexOf('.mp4') === -1) {
-      ElMessage.warning('请上传mp4格式视频')
-      return
-    }
-    var userData = '{"Vod":{}}'
-    if (form.uploader) {
-      form.uploader.stopUpload()
-      form.authProgress = 0
-      form.statusText = ''
-    }
-    form.uploader = createUploader()
-    form.uploader.addFile(form.file, null, null, null, userData)
-    form.uploader.startUpload()
-  } else {
-    console.log(e.target.files)
-    form.file = e.target.files
-    form.file.forEach((item: any) => {
-      if (item.name.indexOf('.mp4') === -1) {
-        ElMessage('请上传mp4格式视频')
-      } else {
-        var userData = '{"Vod":{}}'
-        if (form.uploader) {
-          form.uploader.stopUpload()
-          form.authProgress = 0
-          form.statusText = ''
-        }
-        setTimeout(() => {
-          form.uploader = createUploader()
-          form.uploader.addFile(item, null, null, null, userData)
-          console.log(userData)
-          form.uploader.startUpload()
-        }, 1000)
-      }
-    })
+  form.file = e.target.files[0]
+  if (form.file.name.indexOf('.mp4') === -1) {
+    ElMessage('请上传mp4格式视频')
+    return
+  }
+  var userData = '{"Vod":{}}'
+  if (form.uploader) {
+    form.uploader.stopUpload()
+    form.authProgress = 0
+    form.statusText = ''
   }
+  form.uploader = createUploader()
+  form.uploader.addFile(form.file, null, null, null, userData)
+  form.uploader.startUpload()
 }
-let id = ref(0)
+
 const createUploader: any = () => {
   const w = window as any
-  // for
   const uploader = new w.AliyunUpload.Vod({
     timeout: form.timeout || 60000,
     partSize: form.partSize || 1048576,
@@ -90,9 +57,7 @@ const createUploader: any = () => {
     userId: form.userId,
     // 开始上传
     onUploadstarted: function (uploadInfo: any) {
-      console.log(window.localStorage.fileData)
       const fileData = JSON.parse(window.localStorage.fileData || '{}')
-      console.log(fileData.sourceId)
       // 判断有没有上传过
       const isFile = !!fileData.sourceId
       if (!isFile) {
@@ -113,7 +78,6 @@ const createUploader: any = () => {
           )
         })
       } else {
-        console.log(fileData, uploadInfo)
         // 上传过判断一下上次上传的文件和本次上传的文件一不一样，一样的话继续上传
         if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) {
           uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
@@ -128,72 +92,37 @@ const createUploader: any = () => {
           })
         }
       }
-      if (props.createFlag === 1) {
-        uploadData = {
-          code: 1,
-          name: uploadInfo.file.name,
-          msg: '开始上传'
-        }
-      } else {
-        uploadData1.push({
-          code: 1,
-          name: uploadInfo.file.name,
-          msg: '开始上传'
-        })
-        emit('canClose', { closeStatus: false })
+      uploadData = {
+        code: 1,
+        name: uploadInfo.file.name,
+        msg: '开始上传'
       }
     },
     // 文件上传成功
     onUploadSucceed: function (uploadInfo: any) {
       const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
-      if (props.createFlag === 1) {
-        uploadData = {
-          code: 0,
-          name: uploadInfo.file.name,
-          videoId: fileData.videoId,
-          msg: '上传成功'
-        }
-      } else {
-        const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
-        uploadData1[findIndex] = {
-          code: 0,
-          name: uploadInfo.file.name,
-          videoId: fileData.videoId,
-          msg: '上传成功'
-        }
+      uploadData = {
+        code: 0,
+        name: uploadInfo.file.name,
+        videoId: fileData.videoId,
+        msg: '上传成功'
       }
       emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
-      emit('canClose', { closeStatus: true })
     },
     // 文件上传失败
     // code:any, message:any
     onUploadFailed: function (uploadInfo: any) {
-      if (props.createFlag === 1) {
-        uploadData = {
-          code: 2,
-          name: uploadInfo.file.name,
-          msg: '文件上传失败'
-        }
-      } else {
-        const findIndex = uploadData1.findIndex(item => item.id === id.value)
-        uploadData1[findIndex] = {
-          id: id.value,
-          code: 2,
-          name: uploadInfo.file.name,
-          msg: '文件上传失败'
-        }
+      uploadData = {
+        code: 2,
+        name: uploadInfo.file.name,
+        msg: '文件上传失败'
       }
     },
     // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
     onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
       let progressPercent = Math.ceil(progress * 100)
       form.authProgress = progressPercent
-      if (props.createFlag === 1) {
-        uploadData.progress = progressPercent
-      } else {
-        const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
-        uploadData1[findIndex].progress = progressPercent
-      }
+      uploadData.progress = progressPercent
     },
     // 上传凭证超时
     onUploadTokenExpired: function (uploadInfo: any) {
@@ -213,12 +142,9 @@ const createUploader: any = () => {
   })
   return uploader
 }
-const handleView = () => {
-  idShowMore.value = true
-}
 </script>
 <template>
-  <div v-if="props.createFlag === 1">
+  <div>
     <div class="upload-video">
       <div class="upload-btn">
         本地文件
@@ -227,6 +153,7 @@ const handleView = () => {
       </div>
       <div class="demo-progress" v-if="uploadData.code === 1">
         <el-progress style="width: 340px" :percentage="uploadData.progress" />
+        <!-- <span> {{ uploadData.progress }}% </span> -->
       </div>
       <div class="error video-info" v-if="uploadData.code === 2">
         <div class="name">上传失败（请重新选择文件进行上传）</div>
@@ -237,36 +164,10 @@ const handleView = () => {
     </div>
     <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
   </div>
-  <div v-else>
-    <div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">
-      <div class="upload-btn">
-        本地文件
-        <input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" multiple />
-      </div>
-      <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
-
-      <div v-for="(item, index) in uploadData1.slice(0, 3)" :key="index" style="display: flex; flex-direction: column">
-        <div class="demo-progress" v-if="item.code === 1">
-          <span style="min-width: 340px">{{ item.name }}</span>
-          <el-progress style="width: 200px" :percentage="item.progress" />
-        </div>
-        <div class="error video-info" v-if="item.code === 2">
-          <div class="name">上传失败（请重新选择文件进行上传）</div>
-        </div>
-        <div class="video-info" v-if="item.code === 0">
-          <div class="name1">{{ item.name }}</div>
-        </div>
-      </div>
-      <el-link type="primary" v-if="uploadData1.length > 3" @click="handleView"
-        >共{{ uploadData1.length }}个文件，查看更多</el-link
-      >
-    </div>
-  </div>
-  <VideoDetail :videoList="uploadData1" v-model:idShowMore="idShowMore" v-if="idShowMore === true" />
 </template>
 <style lang="scss">
 .demo-progress {
-  min-width: 350px;
+  width: 350px;
   display: flex;
   span {
     color: #999999;
@@ -310,11 +211,6 @@ const handleView = () => {
       font-size: 16px;
       line-height: 100%;
     }
-    .name1 {
-      color: #aa1941;
-      font-size: 14px;
-      line-height: 1.5;
-    }
     .view {
       font-size: 16px;
       line-height: 100%;