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>
相关推荐
武昌库里写JAVA41 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
努力成为包租婆5 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
thinkQuadratic7 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方8 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
jjw_zyfx8 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷10 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱056712 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.12 小时前
react和vue的区别之一
javascript·vue.js·react.js