使用H5+方法,操作文件夹的方法
需求:项目为一个离线项目,需要将上传的图片保存到应用内,待有网的时候再将图片上传。
问题:当我们使用一个组件(如Vant)上传图片的时候,会展示预览图,其预览图存在的路径为临时路径,而并非服务端返回的路径。只会在本次应用内有效,如重启app,图片将会消失。
解决方案:将临时文件拷贝到某一个文件夹,之后将文件夹压缩上传。
适用范围:uni-app打包的app。
封装操作文件夹的js
/**
*h5+文件操作
**/
/**
* 获取文件系统对象
* @return {Object}
**/
export const requestFileSystem = () => {
return new Promise((resolve, reject) => {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, (fs) => {
resolve(fs)
}, (e) => {
uni.showToast({
title: e.message,
icon: 'none'
})
reject(e.message)
});
})
}
/**
* 创建或打开文件夹
* @param fs 文件系统对象
* @param fileName 文件夹名称
* @return {Object} 文件夹对象
**/
export const getDirectory = (fs, name) => {
return new Promise((resolve, reject) => {
fs.root.getDirectory(name, {
create: true,
}, (dirEntry) => {
resolve(dirEntry)
}, (e) => {
uni.showToast({
title: e.message,
icon: 'none'
})
reject(e.message)
});
})
}
/**
* 打开文件
* @param srcUrl 文件路径
* @param fs 系统文件对象
* @return {Object} 文件对象
**/
export const getFile = (fs, srcUrl) => {
return new Promise((resolve, reject) => {
fs.root.getFile(srcUrl, {
create: false
}, (fileEntry) => {
resolve(fileEntry)
}, function(e) {
uni.showToast({
title: e.message,
icon: 'none'
})
reject(e.message)
});
})
}
/**
* 拷贝文件
* @param fileEntry 文件对象
* @param dirEntry 文件夹对象
* @return {String} 拷贝后文件路径
**/
export const copyTo = (fileEntry, dirEntry) => {
return new Promise((resolve, reject) => {
fileEntry.copyTo(
dirEntry, fileEntry.name,
(newEntry) => {
resolve(newEntry.fullPath)
},
(e) => {
uni.showToast({
title: e.message,
icon: 'none'
})
reject(e.message)
})
})
}
/**
* 查看文件夹目录
* @param fileSrc 文件夹路径
* @return {Array} 文件列表名称
**/
export const getFileName = (fileSrc) => {
return new Promise(async (resolve, reject) => {
let fs = await requestFileSystem();
let dirEntry = await getDirectory(fs, fileSrc);
let directoryReader = dirEntry.createReader();
directoryReader.readEntries((entries) => {
let fileNameList = []
entries.map((item, index) => {
fileNameList.push(item.name)
})
resolve(fileNameList)
}, (e) => {
uni.showToast({
title: e.message,
icon: 'none'
})
reject(e.message)
});
})
}
/**
* 文件拷贝整合方法
* @param url 文件路径
* @param fileName 文件夹名称
* @return {Promise} 拷贝后的文件路径
**/
export const copyFile = async (url, fileName) => {
let fs = await requestFileSystem();
let fileEntry = await getFile(fs, url);
let dirEntry = await getDirectory(fs, fileName);
let fullPath = await copyTo(fileEntry, dirEntry)
return fullPath
}
/**
* 压缩文件
* @param {String} targetPath 目标路径
* @param {String} zipFile 压缩后保存的路径
* @return {String} 拷贝后的文件路径
**/
export const zipCompress = async (zipFile, targetPath) => {
return new Promise((resolve, reject) => {
plus.zip.compress(zipFile, targetPath,
() => {
resolve('压缩成功')
},
(e) => {
uni.showToast({
title: e.message,
icon: 'none'
})
reject('文件压缩失败')
});
})
}