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>