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>
相关推荐
武天1 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js
jiangzhihao05152 小时前
升级到webpack5
前端·javascript·vue.js
橘子海全栈攻城狮2 小时前
【源码+文档+调试讲解】基于SpringBoot + Vue的知识产权管理系统 041
java·vue.js·人工智能·spring boot·后端·安全·spring
2501_916007472 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
掘金安东尼3 小时前
官方:什么是 Vite+?
前端·javascript·vue.js
砺能4 小时前
uniapp生成的app添加操作日志
前端·uni-app
一匹电信狗4 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
ღ_23336 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
Ashley的成长之路6 小时前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
朕的剑还未配妥6 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js