『uniapp』把接口的内容下载为txt本地保存 / 读取本地保存的txt文件内容（详细图文注释）

欢迎关注 『uniapp』 专栏，持续更新中
欢迎关注 『uniapp』 专栏，持续更新中

预览效果

思路分析

downloadTxt 方法

该方法主要完成两个任务：

• 下载 txt 文件：通过 uni.downloadFile 方法从指定的 URL 下载文件，返回的是临时文件路径。
• 保存文件：使用 uni.saveFile 将临时文件保存到本地。
• 读取文件：文件保存完成后，调用 plus.io API 读取文件内容，并将其转换为 JSON 格式存储到 resultData 中。

步骤：

1. 通过 uni.downloadFile 下载文件。
2. 使用 uni.saveFile 保存文件并获取本地路径。
3. 使用 plus.io.resolveLocalFileSystemURL 读取本地文件，FileReader 将其内容读取为文本并解析成 JSON 格式。

readTxt 方法

该方法用于读取已下载并保存的本地 txt 文件。

首先检查 savedFilePath 是否为空，确保文件已下载。如果文件路径有效，调用 readFile 方法读取文件并解析其内容。

if (!this.savedFilePath) {
  console.warn('路径为空,请先下载后再读取文件');
  return;
}
await this.readFile(this.savedFilePath);

完整代码

<template>
	<view>
		<button @click="downloadTxt">下载本地txt</button>
		<button @click="readTxt">读取本地txt</button>
		<button @click="consoleData">输出txt内容</button>
		<button @click="getSavedFileInfo">输出txt文件信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultData: {}, //得到的数据
				savedFilePath: uni.getStorageSync('savedFilePath') || '', //文件保存路径,每次启动读取这个路径
				dateUrl: "http://t.weather.sojson.com/api/weather/city/101030100", //你的json格式api
			};
		},
		methods: {
			getSavedFileInfo() {
				uni.getSavedFileInfo({
					filePath: this.savedFilePath, //仅做示例用，非真正的文件路径
					success: function(res) {
						console.log('文件大小',res.size);
						console.log('创建时间的时间戳 可以根据时间戳决定是否更新本地的txt',res.createTime);
					}
				});
			},
			// 输出 txt 内容
			consoleData() {
				console.warn('resultData:', this.resultData);
				console.warn('savedFilePath:', this.savedFilePath);
			},

			// 下载并保存 txt 文件
			async downloadTxt() {
				try {
					const res = await this.downloadFile();
					if (res.statusCode === 200) {
						const savedFilePath = await this.saveFile(res.tempFilePath);
						this.savedFilePath = savedFilePath;
						await this.readFile(savedFilePath);
					} else {
						console.error('下载返回响应代码错误:', res);
					}
				} catch (err) {
					console.error('下载或文件操作失败:', err);
				}
			},

			// 读取本地 txt 文件
			async readTxt() {
				if (!this.savedFilePath) {
					console.warn('路径为空,请先下载后再读取文件');
					return;
				}
				try {
					await this.readFile(this.savedFilePath);
				} catch (err) {
					console.error('读取文件失败:', err);
				}
			},

			// 文件下载函数
			downloadFile() {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: this.dateUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res);
							} else {
								reject(new Error('下载失败，状态码: ' + res.statusCode));
							}
						},
						fail: (err) => reject(err),
					});
				});
			},

			// 文件保存函数
			saveFile(tempFilePath) {
				return new Promise((resolve, reject) => {
					uni.saveFile({
						tempFilePath,
						success: (saveRes) => {
							console.log('下载并保存txt成功');
							const filePath = plus.io.convertLocalFileSystemURL(saveRes.savedFilePath);
							uni.setStorageSync('savedFilePath',filePath)
							resolve(filePath);
						},
						fail: (err) => reject(err),
					});
				});
			},

			// 文件读取函数
			readFile(filePath) {
				return new Promise((resolve, reject) => {
					plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
						entry.file((file) => {
							const fileReader = new plus.io.FileReader();
							fileReader.onloadend = (evt) => {
								try {
									const jsonData = JSON.parse(evt.target.result);
									this.resultData = jsonData;
									console.log('成功读取并转为JSON:', this.resultData);
									resolve();
								} catch (e) {
									reject(new Error('解析文件失败: ' + e.message));
								}
							};
							fileReader.readAsText(file, 'utf-8');
						}, (err) => reject(err));
					}, (err) => reject(err));
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-4-1

欢迎关注 『uniapp』 专栏，持续更新中
欢迎关注 『uniapp』 专栏，持续更新中
『未完待续』