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

安装jszip插件

npm install jszip

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

javascript 复制代码
<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>
相关推荐
ggdpzhk27 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
中云DDoS CC防护蔡蔡29 分钟前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼4 小时前
微信小程序-prettier 格式化
微信小程序·小程序
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
wqq_9922502776 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序