当前位置: 首页 > article >正文

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>


http://www.kler.cn/a/293680.html

相关文章:

  • ssm100医学生在线学习交流平台+vue(论文+源码)_kaic
  • ❤React-React 组件基础(类组件)
  • libcurl.net入门使用
  • Unity资源打包Addressable资源保存在项目中
  • Matlab自学笔记四十一:介绍日期时间型的显示格式:年‘y‘ 月‘M‘ 日‘d‘ 周‘e‘ 时‘h‘ 分‘m‘ 秒‘s‘
  • 量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据
  • 69-java 接口中可以有构造函数吗
  • 使用 VisionTransformer(VIT) FineTune 训练驾驶员行为状态识别模型
  • setTimeout设置为0和nexttick 谁先执行谁后执行
  • OXC:光交叉连接(optical cross-connect)-介绍
  • 计算机网络-VRRP基础概念
  • 第十七题:电话号码的字母组合
  • 上海市计算机学会竞赛平台2024年8月月赛丙组等差数列的素性
  • 数字图像处理基础:图像处理概念、步骤、方式介绍
  • 【区块链 + 人才服务】FISCO BCOS 高校实训和管理平台 | FISCO BCOS应用案例
  • 【Linux】自定义协议与序列化和反序列化
  • 热力图科普:数据可视化的利器
  • 68-java字符流和字节流
  • 【一嗨租车-注册安全分析报告-滑动验证加载不正常导致安全隐患】
  • DWG如何转换成PDF?总结了四种转换
  • excel比较两列差异性和一致性,统计之后降序排列
  • SQL 数据查询
  • flask-login 生成 cookie,session
  • 从基础到前沿:基于Python的自然语言处理系列介绍
  • 正点原子阿尔法开发板linux驱动开发遇到cc1: error: code model kernel does not support PIC mode
  • KEIL中编译51程序 算法计算异常的疑问