uniapp 使用5+API实现文件的读取，写入功能，实现数据离线持久化

2024-07-15 17:03| 来源: 网络整理| 查看: 265

开发关于uniapp的离线项目时使用到了文件的读取和写入功能，就找到5+API中的IO模块官方文档：https://www.html5plus.org/doc/zh_cn/io.html

前提：

准备好一个js文件，将文件的读取和写入方法都放进去，使用的时候页面中引用文件即可。

// 读取json文件 function getJsonData(path) { //path:路径 //文件读写是一个异步请求用promise包起来方便使用时的async+await return new Promise(resolve => { plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => { //请求文件系统 fs.root.getFile( path, //请求文件的地址 { create: true //当文件不存在时创建 }, fileEntry => { fileEntry.file(function(file) { //new一个可以用来读取文件的对象fileReader let fileReader = new plus.io.FileReader(); fileReader.readAsText(file, "utf-8"); //读文件的格式 fileReader.onerror = e => { //读文件失败 console.log("获取文件失败", fileReader.error); plus.nativeUI.toast("获取文件失败,请重启应用", { background: "#ffa38c", duration: 2000 }); return; }; fileReader.onload = e => { //读文件成功 console.log("读取文件成功"); let txtData = e.target.result; // console.log(txtData); //回调函数内的值想返回到函数外部就用promise+resolve来返回出去 resolve(txtData); }; }); }, error => { console.log("2新建获取文件失败", error); plus.nativeUI.toast("获取文件失败,请重启应用", { background: "#ffa38c", duration: 2000 }); return; }); }, e => { console.log("1请求文件系统失败", e.message); plus.nativeUI.toast("请求系统失败,请重启应用", { background: "#ffa38c", duration: 2000 }); return; } ); }); }; // 写入josn文件 function changeData(path, seek, writeData) { //参数1：上传路径，参数2：seek方法可设置文件操作指定位置，参数3：写入的json数据 return new Promise(resolve => { plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => { fs.root.getFile(path, { create: true }, fileEntry => { fileEntry.file(file => { fileEntry.createWriter(writer => { plus.nativeUI.showWaiting("正在保存信息"); writer.seek(seek); //覆盖文件 const writeDataTemp = JSON.stringify(writeData, null, "\r").replace(/[\r]/g, ""); writer.write(writeDataTemp); // 整个文件重写 writer.onerror = function() { console.log("4写入文件失败", writer.error.message); plus.nativeUI.closeWaiting(); plus.nativeUI.toast("修改信息失败,请重新操作", { background: "#ffa38c", duration: 2000 }); return; }; writer.onsuccess = function() { //填写文件成功 plus.nativeUI.closeWaiting(); plus.nativeUI.toast("修改信息成功", { background: "rgba(255, 255, 255, 0.6)", duration: 2000 }); resolve("1"); }; }, error => { console.log("3创建creactWriter失败", error); plus.nativeUI.toast("保存文件失败,请重新操作", { background: "#ffa38c", duration: 2000 }); return; }); }); }, error => { console.log("2获取文件失败", error); plus.nativeUI.toast("保存文件失败,请重新操作", { background: "#ffa38c", duration: 2000 }); return; } ); }, e => { console.log("1请求文件系统失败", e.message); plus.nativeUI.toast("请求系统失败,请重新操作", { background: "#ffa38c", duration: 2000 }); return; }); }); } /** * 储存文件到指定的地址:把一个文件移动到另外一个位置剪切文件重命名文件 * @param {String} url 新的地址 _doc/ 开头 * @param {String} file 原文件地址 * @param {String} newfilename 新的文件名 */ async function saveFile(url, file, newfilename) { let c = await creatDirs(url) let isokm = moveDirectyOrFile(file, url + "/", newfilename); return isokm } //循环创建目录在本地系统中定义好路径，确保路径存在才行 async function creatDirs(url) { let urllist = url.split("/"); console.log(urllist) //创建文件夹 let u = ""; for (let i = 0; i u = urllist[i]; } else { u = u + "/" + urllist[i]; } console.log(i + "-------------------") console.log(u) console.log(urllist[j + 1]) await CreateNewDir(u, urllist[j + 1]); } } //重命名目录或文件名 function moveDirectyOrFile(srcUrl, dstUrl, newName) { //srcUrl需要移动的目录或文件，dstUrl要移动到的目标目录（父级） plus.io.resolveLocalFileSystemURL(srcUrl, function(srcEntry) { //console.log(111) plus.io.resolveLocalFileSystemURL(dstUrl, function(dstEntry) { //console.log(222) if (srcEntry.isDirectory) { //console.log(33) srcEntry.moveTo(dstEntry, newName, function(entry) { //console.log("New Path: " + entry.fullPath); return true; }, function(e) { return e; //console.log(e.message); }); } else { srcEntry.moveTo(dstEntry, newName, function(entry) { //console.log("New Path: " + entry.fullPath); return true; }, function(e) { return e; //console.log(e.message); }); } }, function(e) { uni.showToast({ title: '获取目标目录失败:' + e.message, duration: 2000, icon: 'none' }); }); }, function(e) { uni.showToast({ title: '获取目录失败:' + e.message, duration: 2000, icon: 'none' }); }); } //创建一个新目录 function CreateNewDir(url, dirName) { //url值可支持相对路径URL、本地路径URL return new Promise((resolver, reject) => { plus.io.resolveLocalFileSystemURL(url, function(entry) { entry.getDirectory(dirName, { create: true, exclusive: false }, function(dir) { resolver(true) }, function(error) { reject(error.message) uni.showToast({ title: dirName + '目录创建失败:' + error.message, duration: 2000, icon: 'none' }); }); }, function(e) { reject(error.message) uni.showToast({ title: '获取目录失败:' + e.message, duration: 2000, icon: 'none' }); }); }) } /** * 复制文件 * @param {String} url 文件地址，文件路径，最好是相对路径 url:"_doc/...." _doc开头 * @param {String} newUrl 目标目录，最好是相对路径 url:"_doc/...." _doc开头 * @param {String} newName 拷贝后的文件名称，默认为原始文件名称 */ function copyFileTo(url, newUrl, dirName, newName) { if (url.length >= 7 && "file://" == url.substring(0, 7)) { url = url.substring(7) } let tempUrl = url.substring(0, url.lastIndexOf('/')); let addUrl = newUrl + '/' + dirName; console.log(addUrl, tempUrl) if (addUrl == tempUrl) { return url; } console.log(newUrl, dirName, newName) return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL(url, async (entry) => { if (entry.isFile) { let c = await CreateNewDir(newUrl, dirName) let u = await getDirsys(addUrl) entry.copyTo(u, newName, en => { resolve(en.fullPath); }, e => { console.log(e); reject('错误：复制时出现错误') uni.showModal({ title: "错误", content: "复制时出现错误" }) }) } else { reject('错误：路径必须是文件') uni.showModal({ title: "错误", content: "路径必须是文件" }) } }, (e) => { console.log(e); reject(e) uni.showModal({ title: "错误", content: "打开文件系统时出错" }) }); }) } //获取目录对象 function getDirsys(url) { return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL(url, (entry) => { resolve(entry) }, (e) => { reject(e) console.log(e); }); }) } //将这些方法暴露出去 export { getJsonData, changeData, saveFile, creatDirs, moveDirectyOrFile, copyFileTo, getDirsys, };

首先，准备好后台给你的json文件格式的文件，在项目需要获取数据的时候，引入js文件，进行数据读取

//导出数据：显示Upload文件夹的json数据 import { getJsonData, changeData } from '../../common/task.js'; export default { data() { return { taskList: [], }; }, onShow() { console.log('onShow'); if (process.env.NODE_ENV === 'development') { // 测试数据这样写保险点 this.getSavedData() return } }, methods: { async getSavedData(){//文件读写是一个异步请求用promise包起来方便使用时的async+await const pathUrl = 'config/task.json'; console.log("----dataJson-----00000--"); const dataJson = await getJsonData(pathUrl);// 1.获取当前任务json数据，序列化json数据 // 2.将数据反序列化为对象进行循环，然后赋值给全局对象供全局对象 console.log("----dataJson-------", JSON.parse(dataJson)); // 网络请求获取json数据并保存到本地文本文件中路径为：pathUrl uni.request({ url:'http://192.168.123.204:8000/ages.json', success: (res) => { console.log("----res--json------"); console.log(res); changeData(pathUrl, 0, res); //参数：保存路径，0，全局变量数据 } }) }, } }

其次，将修改后的数据再重新写入json数据里，更换原来的json文件（这里需要项目中的全局变量配合进行数据更换）

【本文地址】

公司简介

联系我们