1.解压远程压缩包(JSZipUtils,JSZip)
1)安装(vue项目下添加)
npm install jszip JSZipUtils
2)新建decompress-storage.js,代码如下:
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
// 获取远程压缩包并解压
export function getRomoteZipFile(zipUrl) {
return new Promise(function(resolve, reject) {
// step1 请求文件
JSZipUtils.getBinaryContent(zipUrl, function(err, data) {
if (err) {
reject(err)
} else {
resolve(data)
}
})
}).then(function(files) {
// step2 解压
return JSZip.loadAsync(files)
}).then((files) => {
return files
// step3 将文件列表中想要的文件转成想要的格式
// const fileName = Object.keys(files.files)[0] // 测试就拿第一个文件
// console.log(fileName)
// arraybuffer表示文件为二进制,你想要什么文件类型就写什么,比如txt就写string等
// return files.file(fileName).async('arraybuffer')
})
}
3)使用
import { getRomoteZipFile } from '@/utils/decompress-storage'
// 文件解压
jsZipClick() {
const zipUrl = 'http://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/faceData/allFace_823924174618697728_1616726283253.zip'
getRomoteZipFile(zipUrl).then(files => {
const fileList = Object.keys(files.files)
for (let i = 0; i < fileList.length; i++) {
const element = fileList[i]
// 将文件转称流格式
files.file(element).async('arraybuffer').then(arraybuffer => {
console.log(arraybuffer)
createFile(element, arraybuffer)
})
}
})
}
解压缩官网
参考地址
2.将文件存到指定文件夹(cordova-plugin-file)
1)安装(Cordova项目下添加)
cordova plugin add cordova-plugin-file
2)在Cordova的config.xml加入文件读写权限
<preference name="AndroidPersistentFileLocation" value="Internal" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
3)在decompress-storage.js下添加如下代码:
/**
* @description: 创建文件家并写入
* @param {*}
* @return {*}
* @param {*} element 写入的文件名称
* @param {*} arraybuffer 写入的流数据
*/
export function createFile(element, arraybuffer) {
// eslint-disable-next-line no-undef
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(dir) {
// 创建文件夹
dir.getDirectory('recognitionLibrary', { create: true }, function(dirEntry) {
// 创建文件夹
dirEntry.getDirectory('register', { create: true }, function(subDirEntry) {
// 创建文件夹
subDirEntry.getDirectory(element.split('/')[0], { create: true }, function(subDirEntry1) {
alert('dirEntry' + subDirEntry1)
subDirEntry1.getFile(element.split('/')[1], { create: true, exclusive: false }, function(fileEntry) {
fileEntry.name === element.split('/')[1]
fileEntry.fullPath === 'recognitionLibrary/register/' + element.split('/')[0] + '/' + element.split('/')[1]
// 文件内容
var dataObj = new Blob([arraybuffer])
// 写入文件
writeFile(fileEntry, dataObj)
}, onErrorCreateFile)
}, onErrorGetDir)
}, onErrorGetDir)
}, onErrorGetDir)
}, onErrorLoadFs)
}
// FileSystem加载失败回调
// eslint-disable-next-line handle-callback-err
function onErrorLoadFs(error) {
console.log('文件系统加载失败!')
}
// 文件夹创建失败回调
// eslint-disable-next-line handle-callback-err
function onErrorGetDir(error) {
console.log('文件夹创建失败!')
}
// 文件创建失败回调
// eslint-disable-next-line handle-callback-err
function onErrorCreateFile(error) {
console.log('文件创建失败!')
}
// 将内容数据写入到文件中
function writeFile(fileEntry, dataObj) {
alert('fileEntry' + fileEntry.fullPath)
// 创建一个写入对象
fileEntry.createWriter(function(fileWriter) {
// 文件写入成功
fileWriter.onwriteend = function() {
console.log('Successful file write...')
}
// 文件写入失败
fileWriter.onerror = function(e) {
console.log('Failed file write: ' + e.toString())
}
// 写入文件
fileWriter.write(dataObj)
})
}
4)文件写入成功如图所示:(我这里是存在了手机根目录下,存储了图片文件了txt文件)
2021-06-14追加:使用cordova.file.externalRootDirectory需要手机获取读取sdCard的权限,我这边将app卸载,文件夹删除就无法再创建了,不知道是什么原因,后面用cordova.file.externalApplicationStorageDirectory这个来创建,路径为:Android/data/app-id/,这种app卸载文件夹也会对应删除