【uniapp】实现对TXT文本文件的读取和保存下载

开发一个uniapp项目时，需要实现对文本的读取和保存文件到本地，虽然可以跨平台，但还是有几个平台不受支持的，接下来讲讲怎么兼容处理读写文本文件这个问题。

1. 功能说明

项目都按照uniapp官方文档说明写，发现此功能对应的App和H5平台是没有实现的

App	H5	微信小程序	QQ小程序	字节跳动小程序
×	×	√	√	√

如果只想要实现H5和小程序的，不管APP，那就可以满足；
官方文档上说用uni.saveFile()保存文件到本地的，别看错，这个可不是，看一下传入的参数tempFilePath就知道，那是用来把临时文件保存到本地的

2. 使用功能

接下来会讲，假设使用的功能需要调用什么方法

1. 保存文本文件

有一个方法是saveTextFile()，用来保存文本文件，需要传三个参数，分别是文件路径filepath，文件名filename，文本内容text，代码如下

// #ifdef MP-WEIXIN
filePath = wx.env.USER_DATA_PATH + `/${filePath}`;
// #endif
saveTextFile({
	filePath:filepath,
	fileName:filename,
	text:text,
	success:(res)=>{
		uni.showToast({
			icon:'success',
			title:'已保存'
		})
	},
	fail:(err)=>{
		console.log('save text file fail',err)
	}
})

2. 读取文本文件

还有一个方法是openTextFile()，用来读取文本文件，传入的参数是文件file，类似File对象，参考代码如下

uni.chooseFile({
	count:1,
	extension:['.txt','.md'],
	fail:config.fail,
	success:(res)=>{
		openTextFile({
			file:res.tempFiles[0],
			fail:config.fail,
			success:(res)=>{
				if(typeof config.success=='function'){
					config.success({ text:res.result })
				}
				// #ifdef MP-WEIXIN
				res.reader.close();
				// #endif
			},
		})
	}
});

在微信小程序上调用chooseFile()返回的是没有tempFilePaths，只有 tempFiles

3. 实现方法

由于各平台的实现方式不同，就用HBuilderX的条件编译，目前功能只支持H5和小程序，其它平台暂不支持哦

1. saveTextFile()

接着实现功能的方法saveTextFile()，保存文本文件，参考代码如下

// #ifdef MP
uni.getFileSystemManager().writeFile({
	filePath:config.filePath,
	data:config.text,
	encoding:'utf8',
	success:config.success,
	fail:config.fail,
})
// #endif

// #ifdef H5
let blob = new Blob([config.text], { type: 'text/plain' });
let url = window.URL || window.webkitURL;
let objUrl = url.createObjectURL(blob);
let a = document.createElement('a');
a.href=objUrl;
if(config.fileName) a.setAttribute('download', config.fileName);
document.body.appendChild(a);
a.click();
a.remove();
url.revokeObjectURL(objUrl);
config.success({
	path: objUrl,
	errMsg: 'ok'
});
// #endif

H5平台上没有保存文件的方法，只能通过下载文件方式处理

2. openTextFile()

还有，实现功能的方法openTextFile()，读取文本文件，参考代码如下，该功能目前也只支持H5和小程序

let file = config.file;
		
// #ifdef H5
const reader = new FileReader();
reader.onerror = config.fail;
reader.onload = () => {
	config.success({
		result:reader.result,
		reader
	});
};
reader.readAsText(file, 'utf-8');
// #endif

// #ifdef MP
const manager = uni.getFileSystemManager();
manager.readFile({
	filePath:file.path,
	encoding:'utf-8',
	fail:config.fail,
	success:(res)=>{
		config.success({
			result:res.data,
			reader:manager,//不用时，需要调用reader.close()
		})
	},
})
// #endif

也许会说，看打开和保存的文件路径就不对劲，不能选择文件路径在手机内部存储卡么，像这种目前来看是没有的，此路不通，请绕道，要想实现这样的，通过上传文件到云存储然后下载，貌似通过文件分享方式也行。