zhouwx
2025-04-18 39868da3de6192d19dfd316c8be1c080b2d3ebe7
src/views/components/upload.vue
@@ -1,533 +1,495 @@
<template>
  <div class="greetings" v-loading="loading">
    <el-upload accept=".mp4, .mp3, .xls, .xlsx, .doc, .docx, .ppt, .pptx, .pdf"   :on-change="handleFileChange" :on-preview="view"  :auto-upload="false" ref="uploadfileComponent" :limit="1" :on-exceed="handleExceed"  v-model:file-list="fileList">
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button :disabled="uploadDisabled" style="margin-left: 10px" type="success" @click="handlerUpload">上传</el-button>
      <el-button class="ml-3" type="success" @click="resetData" >重置</el-button>
      <template #tip>
        <br /><br />
        <span>上传进度:{{ fakeUploadPercentage }}%</span>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="fakeUploadPercentage" />
        <div class="el-upload__tip text-red">限制一个文件, 新文件将会覆盖原文件</div>
      </template>
    </el-upload>
    <br>
    <div v-if="container.showVideo" style="width: 300px;height: 200px">
      <video   ref="videoPlayer" class="video-js" style="margin: auto auto"></video>
    </div>
<!--  <div class="greetings" v-loading="loading">-->
<!--    <el-upload accept=".mp4, .mp3, .xls, .xlsx, .doc, .docx, .ppt, .pptx, .pdf"   :on-change="handleFileChange" :on-preview="view"  :auto-upload="false" ref="uploadfileComponent" :limit="1" :on-exceed="handleExceed"  v-model:file-list="fileList">-->
<!--      <template #trigger>-->
<!--        <el-button type="primary">选择文件</el-button>-->
<!--      </template>-->
<!--      <el-button :disabled="uploadDisabled" style="margin-left: 10px" type="success" @click="handlerUpload">上传</el-button>-->
<!--      <el-button class="ml-3" type="success" @click="resetData" >重置</el-button>-->
<!--      <template #tip>-->
<!--        <br /><br />-->
<!--        <span>上传进度:{{ fakeUploadPercentage }}%</span>-->
<!--        <el-progress :text-inside="true" :stroke-width="26" :percentage="fakeUploadPercentage" />-->
<!--        <div class="el-upload__tip text-red">限制一个文件, 新文件将会覆盖原文件</div>-->
<!--      </template>-->
<!--    </el-upload>-->
<!--    <br>-->
<!--    <div v-if="container.showVideo" style="width: 300px;height: 200px">-->
<!--      <video   ref="videoPlayer" class="video-js" style="margin: auto auto"></video>-->
<!--    </div>-->
  </div>
<!--  </div>-->
</template>
<script setup>
import { ElMessage } from "element-plus";
import videojs from "video.js"
import { computed, nextTick, onMounted, onUnmounted,ref,reactive,watch  } from "vue";
import SparkMD5 from "spark-md5";
import {uploadFileRequest,mergeFileRequest} from "@/api/onlineEducation/upload"
import pLimit from 'p-limit'
const videoPlayer = ref(null)
const myPlayer = ref(null)
const uploadDisabled=ref(false)
const chunkSize = ref(10 * 1024 * 1024) // 切片大小
const uploadedCount=ref(0) //已上传的分配个数
const fileChunkList=ref([])
const fileList=ref([])
const uploadfileComponent=ref(null)
const emit = defineEmits(["getFile"]);
const loading = ref(false)
const props = defineProps({
  responseType: {
    type: Number,
    default: 0
  }
})
const container=reactive({
  file:{
    name:'',
    percentage:0,
    status:1,
    size:0,
    url:'',
    raw:null,
    uid:0
  },
  fileMd5:'',
  worker:null,
  showVideo:false
})
// 生成文件hash的进度
const hashPercentage = ref(0)
// 显示在页面上的文件上传进度
const fakeUploadPercentage = ref(0)
const type = ref();
onMounted(() => {
  type.value = props.responseType
  // getVideo(props.responseType)
})
const resourcePath = ref();
const getVideo = (value) => {
  type.value = value;
  if(value == 1){
    // container.showVideo = true
    nextTick(() => {
      console.log("111111",videoPlayer.value)
      myPlayer.value = videojs(videoPlayer.value, {
        poster: "",//视频封面
        controls: true,//视频控件
        autoplay:true,//自动播放
        sources: [
          {
            src: resourcePath.value ? import.meta.env.VITE_APP_RESOURCE_API + resourcePath.value : '',
            // src:'',
            type: 'application/x-mpegURL',
          }
        ],
        controlBar: {
          remainingTimeDisplay: {
            displayNegative: false
          }
        },
        playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
      }, onPlayerReady)
    });
  }
}
// watch(() => props.responseType, value => getVideo(value))
onUnmounted(() => {
  if (myPlayer.value) {
    myPlayer.value.dispose()
  }
})
const dispose = () => {
  // if (myPlayer.value) {
  //   myPlayer.value.dispose()
  //   resourcePath.value = ''
  // }
  container.showVideo = false;
  resourcePath.value = ''
  hashPercentage.value=0
  uploadPercentage.value=0
  fakeUploadPercentage.value=0
  uploadedCount.value=0
  fileChunkList.value=[]
  fileList.value=[]
}
const changeType = (val) => {
  type.value = val
  dispose()
  if(val == 1){
    container.showVideo = true
    nextTick(() => {
      getVideo(val)
    })
  }
}
const openValue = ref();
const open = (val) => {
  console.log("val",val)
  openValue.value = val
  fakeUploadPercentage.value = 100
  if(val.resourceType == 1){
    container.showVideo = true
    resourcePath.value = val.resourcePath;
    getVideo(val.resourceType)
  }else {
    container.showVideo = false
    // if (myPlayer.value) {
    //   myPlayer.value.dispose()
    // }
    fileList.value.push({
      path: val.resourcePath,
      name: val.originName
    })
  }
}
const view = (file) => {
  console.log('vlco',file)
  // console.log("点击文件=>", file);
  const url = import.meta.env.VITE_APP_RESOURCE_API + file.path;
  const link = document.createElement("a");
  link.href = url;
  link.download = file.name;
  // link.target = "_blank";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
// video初始化完成的回调函数
const onPlayerReady = () => {
  myPlayer.value.log("play.....")
  bindVideoEvents()
}
// 绑定事件
const bindVideoEvents = () => {
  if (!myPlayer.value) return
  myPlayer.value.on('play', onPlay)
  myPlayer.value.on('pause', onPause)
  myPlayer.value.on('ended', onEnded)
  myPlayer.value.on('timeupdate', onTimeupdate)
  myPlayer.value.on('loadedmetadata', onLoadedmetadata)
  myPlayer.value.on('fullscreenchange', onFullscreenchange)
  myPlayer.value.on('error', err => {
    console.log('视频加载发生错误', err)
  })
}
const onPlay = () => {
  console.log('播放视频')
}
const onPause = () => {
  console.log('暂停播放')
}
const onEnded = () => {}
const onTimeupdate = () => {
  console.log('播放位置已更改时,播放时间更新')
}
// 全屏切换
const onFullscreenchange = () => {
  console.log('全屏状态改变')
}
// 元数据加载完成
const onLoadedmetadata = () => {
  console.log('元数据加载完成')
}
//计算文件上传的进度
const uploadPercentage= computed({
  get(){
    if(!container.file||!fileChunkList.value.length){
      return 0
    }
    const loaded=fileChunkList.value.map(item => item.size * item.percentage).reduce((acc,cur) => {
      return acc+cur
    })
    console.log('loaded',uploadedCount.value,loaded)
    return parseInt((loaded/container.file.size).toFixed(2))
  },
  set(value){
    return value
  }
})
// watch uploadPercentage,得到fakeUploadPercentage
watch(uploadPercentage, (newValue) => {
  if (newValue >= fakeUploadPercentage.value) {
    fakeUploadPercentage.value = newValue
  }
})
const resetData = () => {
  container.showVideo = false
  resourcePath.value = ''
  hashPercentage.value=0
  uploadPercentage.value=0
  fakeUploadPercentage.value=0
  uploadedCount.value=0
  fileChunkList.value=[]
  fileList.value=[]
  if(container.worker){
    container.worker.onmessage=null
  }
  // if (myPlayer.value) {
  //   myPlayer.value.dispose()
  // }
  const file = {
    resourceSize: null,
    md5: '',
    resourcePath: '',
    mediaType: '',
    docPage: 0,
    resourceLength: '',
    originName:''
  }
  emit("getFile",file)
}
//选择了文件
const handleFileChange=(uploadFile,uploadFiles) =>{
  // resetData()
  if(!uploadFile){
    return
  }
  container.file=uploadFile
  fileList.value=uploadFiles
}
const handleExceed= (files) => {
  uploadfileComponent.value.clearFiles()
  nextTick(() => {
    uploadfileComponent.value.handleStart(files[0])
  })
}
//上传
const handlerUpload= async() => {
  if(type.value == null){
    ElMessage({
      type: 'warning',
      message: '请先选择资源类型'
    });
    return false
  }
  if(!container.file.raw){
    return
  }
  if(container.file.raw.size > 1024 * 1024 * 1000){
      ElMessage({
        type: 'warning',
        message: '文件大小不能超过1G'
      });
      return false
  }
  const filetype = container.file.raw.name.split(".").pop();
  const extension = (filetype === "mp4" || filetype ==="mp3" || filetype ==="xls" || filetype === "xlsx" || filetype ==="doc" || filetype ==="docx" || filetype === "ppt" || filetype ==="pptx" || filetype ==="pdf");
  if (!extension ) {
    ElMessage({
      type: 'warning',
      message: '暂不支持该格式上传'
    });
    return false;
  }
  if((type.value == 1 && filetype != 'mp4') || (type.value == 2 && filetype != 'mp3')){
    ElMessage({
      type: 'warning',
      message: '请上传所选资源类型的文件'
    });
    return false;
  }
  if(type.value == 3){
    if( filetype == 'xls' || filetype == 'xlsx' || filetype == 'doc'|| filetype == 'docx'|| filetype == 'ppt'|| filetype == 'pptx'|| filetype == 'pdf' ){
    }else {
      ElMessage({
        type: 'warning',
        message: '请上传所选资源类型的文件'
      });
      return false;
    }
  }
  loading.value = true
  //文件分片
  const chunkList=createFileChunk(container.file.raw)
  console.log('文件分了多少片:',chunkList.length)
  //通过webworker计算出文件hash
  container.fileMd5=await calculateMd5(chunkList)
  console.log('文件hash1:',container.fileMd5)
  // container.fileMd5=await getFileMD5(container.file.raw)
  // console.log('文件hash2:',container.hash)
  fileChunkList.value=[]
  fileChunkList.value=chunkList.map(({file},index) => ({
    fileMd5:container.fileMd5,
    index,
    chunkName: `${container.fileMd5}-${index}`,
    chunk:file,
    size:file.size,
    // 如果已上传切片数组uploadedList中包含这个切片,则证明这个切片之前已经上传成功了,进度设为100。
    percentage:0
  }))
  uploadChunks(fileChunkList)
}
//文件分片
const createFileChunk = (file,size=chunkSize.value) => {
  const chunkList=[]
  let cur=0
  while(cur<file.size){
    chunkList.push({
      file:file.slice(cur,cur+size),
    })
    cur+=size
  }
  return chunkList
}
//计算文件md5 方法1
const calculateMd5 = (chunkList) => {
  return new Promise((resolve) => {
    container.worker=new Worker('/hash.js')
    container.worker.postMessage({fileChunkList:chunkList})
    container.worker.onmessage= (e) => {
      const {percentage,hash} = e.data
      hashPercentage.value=percentage.toFixed(2)
      if(hash){
        resolve(hash)
      }
    }
  })
}
//计算文件md5 方法2
const  getFileMD5 = (file) => {
  return new Promise((resolve, reject) => {
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
      spark.append(e.target?.result)
      resolve(spark.end())
    }
    fileReader.onerror = () => {
      reject('')
    }
    fileReader.readAsArrayBuffer(file)
  })
}
//计算上传进度
const createProgressHandler = (item) => {
  console.log('createProgresshandler -> item', item);
  return (p) => {
    if(item.percentage>=100){
      item.percentage = 100
    }else{
      item.percentage=parseInt(String((p.loaded/p.total)*100))
    }
    // 确保进度百分比不会超过100%
    if (item.percentage > 100) item.percentage = 100
  }
}
//上传切片
const uploadChunks= async(uploadedList) => {
  const limit = pLimit(10); // 控制并发数为10
  const requestList=uploadedList.value.map(({chunk,chunkName,index,fileMd5}) => {
    const formdata=new FormData()
    formdata.append('file',chunk)
    formdata.append('chunkName',chunkName)
    formdata.append('fileName',container.file.name)
    formdata.append('fileMd5',fileMd5)
    formdata.append('index',index)
    return {formdata,index}
  }).map(async ({formdata,index}) => {
    return limit(() => doUploadChunk({data:formdata,onUploadProgress:createProgressHandler(fileChunkList.value[index])}))
  })
  await Promise.all(requestList)
  console.log("数组:",fileChunkList)
  if(uploadedCount.value>=fileChunkList.value.length){
    mergeRequest()
  }
}
const doUploadChunk = ({data,onUploadProgress}) => {
  return new Promise((resolve) => {
    uploadFileRequest(data,onUploadProgress).then((result) => {
      let resData=result.data
      if(result&&result.code==200){
        uploadedCount.value=uploadedCount.value+1
        fileChunkList.value[data.get('index')].percentage=100 //手动更新进度
        console.log(uploadedCount.value,'result--------------')
      }
      resolve('done')
    })
  })
}
const mergeRequest = async() => {
  if(container.file.name.lastIndexOf(".") === -1){
    ElMessage.warning("请输入文件后缀名")
    return
  }
  let data=await mergeFileRequest({fileMd5:container.fileMd5,fileName:container.file.name})
  console.log(data,"mege------------222")
  if(data && data.code==200){
    const filetype = data.data.originName.split(".").pop();
    if(filetype == 'mp4' || filetype == 'MP4'){
      container.showVideo = true
      await nextTick(() => {
        console.log("myPlayer.value",myPlayer.value)
        myPlayer.value.src(
            {
              src: import.meta.env.VITE_APP_RESOURCE_API +data.data.path,
              type: 'application/x-mpegURL',
            })
        //   myPlayer.value.load()
        myPlayer.value.play().catch((error) => {
          console.error('Error playing video:', error);
        });
      })
        //  myPlayer.value.pause()
        //myPlayer.value.reset()
    }
    const file = {
      resourceSize: data.data.size,
      md5: data.data.md5,
      resourcePath: data.data.path,
      mediaType: filetype,
      docPage: data.data.docPage,
      resourceLength: data.data.resourceLength,
      originName: data.data.originName
    }
    emit("getFile",file)
    loading.value = false
    ElMessage.success("上传成功")
  }else{
    ElMessage.success("合并数据失败")
  }
}
defineExpose({
  dispose,
  changeType,
  open
});
// import { ElMessage } from "element-plus";
// import videojs from "video.js"
// import { computed, nextTick, onMounted, onUnmounted,ref,reactive,watch  } from "vue";
// import SparkMD5 from "spark-md5";
// import {uploadFileRequest,mergeFileRequest} from "@/api/onlineEducation/upload"
// import pLimit from 'p-limit'
//
// const videoPlayer = ref(null)
// const myPlayer = ref(null)
// const uploadDisabled=ref(false)
// const chunkSize = ref(10 * 1024 * 1024) // 切片大小
// const uploadedCount=ref(0) //已上传的分配个数
// const fileChunkList=ref([])
// const fileList=ref([])
// const uploadfileComponent=ref(null)
// const emit = defineEmits(["getFile"]);
// const loading = ref(false)
// const props = defineProps({
//   responseType: {
//     type: Number,
//     default: 0
//   }
// })
// const container=reactive({
//   file:{
//     name:'',
//     percentage:0,
//     status:1,
//     size:0,
//     url:'',
//     raw:null,
//     uid:0
//   },
//   fileMd5:'',
//   worker:null,
//   showVideo:false
// })
// // 生成文件hash的进度
// const hashPercentage = ref(0)
// // 显示在页面上的文件上传进度
// const fakeUploadPercentage = ref(0)
// const type = ref();
// onMounted(() => {
//   type.value = props.responseType
//   // getVideo(props.responseType)
//
// })
// const resourcePath = ref();
// const getVideo = (value) => {
//   type.value = value;
//   if(value == 1){
//     // container.showVideo = true
//     nextTick(() => {
//       console.log("111111",videoPlayer.value)
//       myPlayer.value = videojs(videoPlayer.value, {
//         poster: "",//视频封面
//         controls: true,//视频控件
//         autoplay:true,//自动播放
//         sources: [
//           {
//             src: resourcePath.value ? import.meta.env.VITE_APP_RESOURCE_API + resourcePath.value : '',
//             // src:'',
//             type: 'application/x-mpegURL',
//           }
//         ],
//         controlBar: {
//           remainingTimeDisplay: {
//             displayNegative: false
//           }
//         },
//         playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
//       }, onPlayerReady)
//     });
//   }
// }
// // watch(() => props.responseType, value => getVideo(value))
// onUnmounted(() => {
//   if (myPlayer.value) {
//     myPlayer.value.dispose()
//   }
// })
//
// const dispose = () => {
//   // if (myPlayer.value) {
//   //   myPlayer.value.dispose()
//   //   resourcePath.value = ''
//   // }
//   container.showVideo = false;
//   resourcePath.value = ''
//   hashPercentage.value=0
//   uploadPercentage.value=0
//   fakeUploadPercentage.value=0
//   uploadedCount.value=0
//   fileChunkList.value=[]
//   fileList.value=[]
// }
//
// const changeType = (val) => {
//   type.value = val
//   dispose()
//   if(val == 1){
//     container.showVideo = true
//     nextTick(() => {
//       getVideo(val)
//     })
//   }
// }
// const openValue = ref();
// const open = (val) => {
//   console.log("val",val)
//   openValue.value = val
//   fakeUploadPercentage.value = 100
//   if(val.resourceType == 1){
//     container.showVideo = true
//     resourcePath.value = val.resourcePath;
//     getVideo(val.resourceType)
//   }else {
//     container.showVideo = false
//     // if (myPlayer.value) {
//     //   myPlayer.value.dispose()
//     // }
//     fileList.value.push({
//       path: val.resourcePath,
//       name: val.originName
//     })
//   }
// }
// const view = (file) => {
//   console.log('vlco',file)
//   // console.log("点击文件=>", file);
//   const url = import.meta.env.VITE_APP_RESOURCE_API + file.path;
//   const link = document.createElement("a");
//   link.href = url;
//   link.download = file.name;
//   // link.target = "_blank";
//   document.body.appendChild(link);
//   link.click();
//   document.body.removeChild(link);
// }
// // video初始化完成的回调函数
// const onPlayerReady = () => {
//   myPlayer.value.log("play.....")
//   bindVideoEvents()
// }
// // 绑定事件
// const bindVideoEvents = () => {
//   if (!myPlayer.value) return
//   myPlayer.value.on('play', onPlay)
//   myPlayer.value.on('pause', onPause)
//   myPlayer.value.on('ended', onEnded)
//   myPlayer.value.on('timeupdate', onTimeupdate)
//   myPlayer.value.on('loadedmetadata', onLoadedmetadata)
//   myPlayer.value.on('fullscreenchange', onFullscreenchange)
//   myPlayer.value.on('error', err => {
//     console.log('视频加载发生错误', err)
//   })
// }
//
// const onPlay = () => {
//   console.log('播放视频')
// }
// const onPause = () => {
//   console.log('暂停播放')
// }
// const onEnded = () => {}
// const onTimeupdate = () => {
//   console.log('播放位置已更改时,播放时间更新')
// }
// // 全屏切换
// const onFullscreenchange = () => {
//   console.log('全屏状态改变')
// }
// // 元数据加载完成
// const onLoadedmetadata = () => {
//   console.log('元数据加载完成')
//
// }
//
//
// //计算文件上传的进度
// const uploadPercentage= computed({
//   get(){
//     if(!container.file||!fileChunkList.value.length){
//       return 0
//     }
//     const loaded=fileChunkList.value.map(item => item.size * item.percentage).reduce((acc,cur) => {
//       return acc+cur
//     })
//     console.log('loaded',uploadedCount.value,loaded)
//     return parseInt((loaded/container.file.size).toFixed(2))
//   },
//   set(value){
//     return value
//   }
// })
//
// // watch uploadPercentage,得到fakeUploadPercentage
// watch(uploadPercentage, (newValue) => {
//   if (newValue >= fakeUploadPercentage.value) {
//     fakeUploadPercentage.value = newValue
//   }
// })
//
// const resetData = () => {
//   container.showVideo = false
//   resourcePath.value = ''
//   hashPercentage.value=0
//   uploadPercentage.value=0
//   fakeUploadPercentage.value=0
//   uploadedCount.value=0
//   fileChunkList.value=[]
//   fileList.value=[]
//   if(container.worker){
//     container.worker.onmessage=null
//   }
//   // if (myPlayer.value) {
//   //   myPlayer.value.dispose()
//   // }
//   const file = {
//     resourceSize: null,
//     md5: '',
//     resourcePath: '',
//     mediaType: '',
//     docPage: 0,
//     resourceLength: '',
//     originName:''
//   }
//   emit("getFile",file)
// }
//
// //选择了文件
// const handleFileChange=(uploadFile,uploadFiles) =>{
//   // resetData()
//   if(!uploadFile){
//     return
//   }
//   container.file=uploadFile
//   fileList.value=uploadFiles
// }
//
// const handleExceed= (files) => {
//   uploadfileComponent.value.clearFiles()
//   nextTick(() => {
//     uploadfileComponent.value.handleStart(files[0])
//   })
// }
//
// //上传
// const handlerUpload= async() => {
//
//   if(type.value == null){
//     ElMessage({
//       type: 'warning',
//       message: '请先选择资源类型'
//     });
//     return false
//   }
//
//   if(!container.file.raw){
//     return
//   }
//   if(container.file.raw.size > 1024 * 1024 * 1000){
//       ElMessage({
//         type: 'warning',
//         message: '文件大小不能超过1G'
//       });
//       return false
//   }
//
//   const filetype = container.file.raw.name.split(".").pop();
//   const extension = (filetype === "mp4" || filetype ==="mp3" || filetype ==="xls" || filetype === "xlsx" || filetype ==="doc" || filetype ==="docx" || filetype === "ppt" || filetype ==="pptx" || filetype ==="pdf");
//   if (!extension ) {
//     ElMessage({
//       type: 'warning',
//       message: '暂不支持该格式上传'
//     });
//     return false;
//   }
//   if((type.value == 1 && filetype != 'mp4') || (type.value == 2 && filetype != 'mp3')){
//     ElMessage({
//       type: 'warning',
//       message: '请上传所选资源类型的文件'
//     });
//     return false;
//   }
//   if(type.value == 3){
//     if( filetype == 'xls' || filetype == 'xlsx' || filetype == 'doc'|| filetype == 'docx'|| filetype == 'ppt'|| filetype == 'pptx'|| filetype == 'pdf' ){
//
//     }else {
//       ElMessage({
//         type: 'warning',
//         message: '请上传所选资源类型的文件'
//       });
//       return false;
//     }
//   }
//   loading.value = true
//   //文件分片
//   const chunkList=createFileChunk(container.file.raw)
//   console.log('文件分了多少片:',chunkList.length)
//   //通过webworker计算出文件hash
//   container.fileMd5=await calculateMd5(chunkList)
//   console.log('文件hash1:',container.fileMd5)
//   // container.fileMd5=await getFileMD5(container.file.raw)
//   // console.log('文件hash2:',container.hash)
//
//   fileChunkList.value=[]
//   fileChunkList.value=chunkList.map(({file},index) => ({
//     fileMd5:container.fileMd5,
//     index,
//     chunkName: `${container.fileMd5}-${index}`,
//     chunk:file,
//     size:file.size,
//     // 如果已上传切片数组uploadedList中包含这个切片,则证明这个切片之前已经上传成功了,进度设为100。
//     percentage:0
//   }))
//
//   uploadChunks(fileChunkList)
//
// }
//
// //文件分片
// const createFileChunk = (file,size=chunkSize.value) => {
//   const chunkList=[]
//   let cur=0
//   while(cur<file.size){
//     chunkList.push({
//       file:file.slice(cur,cur+size),
//     })
//     cur+=size
//   }
//   return chunkList
// }
//
// //计算文件md5 方法1
// const calculateMd5 = (chunkList) => {
//   return new Promise((resolve) => {
//     container.worker=new Worker('/hash.js')
//     container.worker.postMessage({fileChunkList:chunkList})
//     container.worker.onmessage= (e) => {
//       const {percentage,hash} = e.data
//       hashPercentage.value=percentage.toFixed(2)
//       if(hash){
//         resolve(hash)
//       }
//     }
//   })
// }
//
// //计算文件md5 方法2
// const  getFileMD5 = (file) => {
//   return new Promise((resolve, reject) => {
//     const spark = new SparkMD5.ArrayBuffer()
//     const fileReader = new FileReader()
//     fileReader.onload = (e) => {
//       spark.append(e.target?.result)
//       resolve(spark.end())
//     }
//     fileReader.onerror = () => {
//       reject('')
//     }
//     fileReader.readAsArrayBuffer(file)
//   })
// }
//
// //计算上传进度
// const createProgressHandler = (item) => {
//   console.log('createProgresshandler -> item', item);
//   return (p) => {
//     if(item.percentage>=100){
//       item.percentage = 100
//     }else{
//       item.percentage=parseInt(String((p.loaded/p.total)*100))
//     }
//     // 确保进度百分比不会超过100%
//     if (item.percentage > 100) item.percentage = 100
//   }
// }
//
//
//
// //上传切片
// const uploadChunks= async(uploadedList) => {
//   const limit = pLimit(10); // 控制并发数为10
//   const requestList=uploadedList.value.map(({chunk,chunkName,index,fileMd5}) => {
//     const formdata=new FormData()
//     formdata.append('file',chunk)
//     formdata.append('chunkName',chunkName)
//     formdata.append('fileName',container.file.name)
//     formdata.append('fileMd5',fileMd5)
//     formdata.append('index',index)
//     return {formdata,index}
//   }).map(async ({formdata,index}) => {
//     return limit(() => doUploadChunk({data:formdata,onUploadProgress:createProgressHandler(fileChunkList.value[index])}))
//   })
//   await Promise.all(requestList)
//   console.log("数组:",fileChunkList)
//   if(uploadedCount.value>=fileChunkList.value.length){
//     mergeRequest()
//   }
//
// }
//
//
// const doUploadChunk = ({data,onUploadProgress}) => {
//   return new Promise((resolve) => {
//     uploadFileRequest(data,onUploadProgress).then((result) => {
//       let resData=result.data
//       if(result&&result.code==200){
//         uploadedCount.value=uploadedCount.value+1
//         fileChunkList.value[data.get('index')].percentage=100 //手动更新进度
//         console.log(uploadedCount.value,'result--------------')
//       }
//       resolve('done')
//     })
//   })
// }
//
// const mergeRequest = async() => {
//   if(container.file.name.lastIndexOf(".") === -1){
//     ElMessage.warning("请输入文件后缀名")
//     return
//   }
//   let data=await mergeFileRequest({fileMd5:container.fileMd5,fileName:container.file.name})
//   console.log(data,"mege------------222")
//   if(data && data.code==200){
//     const filetype = data.data.originName.split(".").pop();
//     if(filetype == 'mp4' || filetype == 'MP4'){
//       container.showVideo = true
//       await nextTick(() => {
//
//         console.log("myPlayer.value",myPlayer.value)
//         myPlayer.value.src(
//             {
//               src: import.meta.env.VITE_APP_RESOURCE_API +data.data.path,
//               type: 'application/x-mpegURL',
//             })
//         //   myPlayer.value.load()
//         myPlayer.value.play().catch((error) => {
//           console.error('Error playing video:', error);
//         });
//       })
//         //  myPlayer.value.pause()
//         //myPlayer.value.reset()
//     }
//     const file = {
//       resourceSize: data.data.size,
//       md5: data.data.md5,
//       resourcePath: data.data.path,
//       mediaType: filetype,
//       docPage: data.data.docPage,
//       resourceLength: data.data.resourceLength,
//       originName: data.data.originName
//     }
//     emit("getFile",file)
//
//
//     loading.value = false
//     ElMessage.success("上传成功")
//   }else{
//     ElMessage.success("合并数据失败")
//   }
// }
//
// defineExpose({
//   dispose,
//   changeType,
//   open
// });
</script>
<style scoped>
.greetings{
  :deep(.video-js) {
    width: 300px;
    height: 200px;
  }
  :deep(.el-icon--close) {
    display: none;
  }
}
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}
h3 {
  font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
  text-align: center;
}
@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>