目录
- 预览效果
- 思路分析
- downloadTxt 方法
- readTxt 方法
- 完整代码
- 总结
欢迎关注 『uniapp』 专栏,持续更新中
欢迎关注 『uniapp』 专栏,持续更新中
预览效果
思路分析
downloadTxt 方法
该方法主要完成两个任务:
- 下载 txt 文件:通过 uni.downloadFile 方法从指定的 URL 下载文件,返回的是临时文件路径。
- 保存文件:使用 uni.saveFile 将临时文件保存到本地。
- 读取文件:文件保存完成后,调用 plus.io API 读取文件内容,并将其转换为 JSON 格式存储到 resultData 中。
步骤:
- 通过 uni.downloadFile 下载文件。
- 使用 uni.saveFile 保存文件并获取本地路径。
- 使用 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』 专栏,持续更新中
『未完待续』