uniapp+vue3实现小程序和h5解压线上压缩包以及如何访问解压后的视频地址

安装jszip插件

npm install jszip

对应功能实现和逻辑处理：

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { onHide, onUnload } from '@dcloudio/uni-app'
  import JSZip from 'jszip'
  let videoSrc = ref('') // 视频地址
  // 创建JSZip实例
  const zip = new JSZip()

 // #ifdef MP-WEIXIN
  let fsm = reactive(null)
  // 创建临时文件路径
  const tempFilePath = `${uni.env.USER_DATA_PATH}/video.mp4`
  // #endif
  onMounted(() => {
    unzipOnlineFile(线上压缩地址)
  })
  onHide(() => {
    // 在适当的时候，比如组件销毁时，执行以下代码
    // #ifdef WEB
    URL.revokeObjectURL(videoSrc.value)
    // #endif
    // #ifdef MP-WEIXIN
    fsm.removeSavedFile(tempFilePath)
    // #endif
  })
  onUnload(() => {
    // #ifdef WEB
    URL.revokeObjectURL(videoSrc.value)
    // #endif
    // #ifdef MP-WEIXIN
    fsm.removeSavedFile(tempFilePath)
    // #endif
  })
 /**
   * 解压线上压缩包
   * @param zipUrl {String} 解压地址
   */
  async function unzipOnlineFile (zipUrl) {
    // #ifdef WEB
    // 从URL加载.zip文件
    let response = await fetch(zipUrl)
    let arrayBuffer = await response.arrayBuffer()
    // 加载ArrayBuffer到JSZip实例
    await zip.loadAsync(arrayBuffer)

    // 获取压缩包中的文件列表
    fileList = Object.keys(zip.files)

    // 解压缩处理，解压第一个文件
    let fileContent = await zip.files[fileList[0]].async('string')
    // todo 进行页面对应的赋值   
    console.log(fileContent, '解压第一个文件的内容')

    // 解压缩处理，解压第二个文件(视频文件)
    zip.file(fileList[1]).async('blob').then(blob => {
      // 创建一个临时的URL指向Blob对象 设置video的src属性为临时的URL,可以进行视频的播放等操作
      videoSrc.value = URL.createObjectURL(blob)
    })
    // #endif

    // #ifdef MP-WEIXIN
    uni.request({
      url: zipUrl,
      method: 'GET',
      responseType: 'arraybuffer', // 小程序中获取二进制数据需要指定arraybuffer
      success: res => {
        let data = res.data
        // 使用JSZip处理获取到的资源
        zip.loadAsync(data)
          .then(contents => {
            // 处理解压后的内容
            fileList = Object.keys(contents.files)
            // 解压缩处理，解压第一个文件
            return zip.files[fileList[0]].async('string')
          }).then(fileContent => {
            // todo 进行页面对应的赋值   
            console.log(fileContent, '解压第一个文件的内容')
          }).then(() => {
            // 解压缩处理，解压第二个文件(视频文件)
            let videoFile = zip.files[fileList[1]] // 获取视频文件

            // 如果知道文件名，可以直接通过名字获取
            // const videoFile = zip.file('video.mp4');

            // 将视频文件内容转换为ArrayBuffer 
            return videoFile.async('arraybuffer')
          }).then(videoBuffer => {
            fsm = uni.getFileSystemManager()
            // 写入临时文件
            return fsm.writeFile({
              filePath: tempFilePath,
              data: videoBuffer,
              encoding: 'binary'
            })
          }).then(()=> {
            // 设置video的src属性为临时的di,可以进行视频的播放等操作
            videoSrc.value = tempFilePath
          })
      },
      fail: error => {
        // 处理错误
        console.log(error, '解压错误')
      }
    })
    // #endif
  }
</script>