使用H5+方法,操作文件夹的方法

463 阅读2分钟

使用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('文件压缩失败')
			});
	})
}