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-WEIXINlet fsm = reactive(null)// 创建临时文件路径const tempFilePath = `${uni.env.USER_DATA_PATH}/video.mp4`// #endifonMounted(() => {unzipOnlineFile(线上压缩地址)})onHide(() => {// 在适当的时候，比如组件销毁时，执行以下代码// #ifdef WEBURL.revokeObjectURL(videoSrc.value)// #endif// #ifdef MP-WEIXINfsm.removeSavedFile(tempFilePath)// #endif})onUnload(() => {// #ifdef WEBURL.revokeObjectURL(videoSrc.value)// #endif// #ifdef MP-WEIXINfsm.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-WEIXINuni.request({url: zipUrl,method: 'GET',responseType: 'arraybuffer', // 小程序中获取二进制数据需要指定arraybuffersuccess: 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>