plus.io 文件内容获取、修改

零、前言

最近在做一个需要对手机文件进行获取和修改的app,用到了h5+的plus.ioAPI,特此记录

二、文件获取

1.需要获取文件的页面.js

import getData from '../utils/getData'//方法：获取文件数据
componentDidMount() {
    //plusPredy准备工作  用于获取文件数据 
    if (window.plus) {//当有plus时，直接plusPredy
      this.plusready.bind(this)()
    } else {//当没有plus时，要先创造plusready事件
      document.addEventListener('plusready', this.plusready.bind(this), false)
    }
  }

  //plusready准备后   获取文件
  async plusready() {
    // 获取文件
    const txtData = await getData('config.txt') //根目录 好找 但android11以上可能不支持  这里用的是符合沙盒规范的目录
    const listData = (txtData && JSON.parse(txtData)) || [] //从文件获取下来的数据
}


2.文件获取方法.js

function getData(path) {
  return new Promise(resolve => {//文件读写是一个异步请求 用promise包起来方便使用时的async+await
    plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {//请求文件系统
      fs.root.getFile(path, {//请求地址文件  '/storage/emulated/0/config.txt'为根目录  '/config.txt'为/storage/Android/data/io.dcloud.HBuilder（包名）/documents/config.js
        create: true//当文件不存在时创建
      }, fileEntry => {
        fileEntry.file(function (file) {
          let fileReader = new plus.io.FileReader()//new一个可以用来读取文件的对象fileReader
          fileReader.readAsText(file, 'utf-8')//读文件的格式
          fileReader.onerror = e => {//读文件失败
            console.log('获取文件失败', fileReader.error)
            plus.nativeUI.toast("获取文件失败,请重启应用", {
              background: '#ffa38c',
            })
            return
          }
          fileReader.onload = e => {//读文件成功
            let txtData = e.target.result
            resolve(txtData)////回调函数内的值想返回到函数外部  就用promise+resolve来返回出去
          }
        })
      }, error => {
        console.log('2新建获取文件失败', error)
        plus.nativeUI.toast("获取文件失败,请重启应用", {
          background: '#ffa38c',
        })
        return
      })
    },
      e => {
        console.log('1请求文件系统失败', e.message)
        plus.nativeUI.toast("请求系统失败,请重启应用", {
          background: '#ffa38c',
        })
        return
      }
    )
  }
  )
}

export default getData



三、给文件末尾增加信息

1.给文件添加信息的页面page.js

import addData from '../utils/addData.js' //方法：添加文件数据
// 添加数据
  async addData(boxId) {
    // 更新到文件
    await addData('config.txt', this.state.message)
  }


2.文件增加信息方法

function addData(path, writeData) {
  return new Promise(resolve => {//文件读写是一个异步请求 用promise包起来方便使用时的async+await
    plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {//请求文件系统
      fs.root.getFile(path, {//请求地址文件 '/storage/emulated/0/config.txt'为根目录  '/config.txt'为/storage/Android/data/io.dcloud.HBuilder（包名）/documents/config.js
        create: true//当文件不存在时创建
      }, fileEntry => {
        fileEntry.file(file => {
          fileEntry.createWriter(writer => {
            plus.nativeUI.showWaiting('正在保存信息')
            writer.seek(writer.length - 2) //删除问价最后的结尾符号]
            const writeDataTemp = JSON.stringify(writeData, null, '\r').replace(/[\r]/g, '')//先在每行行头转行，再把每个转行删掉，得到的json格式才是即没有缩进，有转行了的
            if (writer.length > 2) {//如果文件原来有数据，则是添加数据条
              writer.write(',\n' + writeDataTemp + '\n]')
            }
            else {//如果文件原来没有数据，则是重新添加数据
              writer.write('[\n' + writeDataTemp + '\n]')
            }
            writer.onerror = function () {//写文件失败
              console.log('4写入文件失败', writer.error.message)
              plus.nativeUI.closeWaiting()
              plus.nativeUI.toast("添加信息失败,请重新操作", {
                background: '#ffa38c',
              })
              return
            }
            writer.onsuccess = function () { //写文件成功
              plus.nativeUI.closeWaiting()
              plus.nativeUI.toast("添加信息成功", {
                background: 'rgba(255, 255, 255, 0.6)',
              })
              resolve('1')//回调函数内的值想返回到函数外部  就用promise+resolve来返回出去
            }
          },
            error => {
              console.log('3创建creactWriter失败', error)
              plus.nativeUI.toast("保存文件失败,请重新操作", {
                background: '#ffa38c',
              })
              return
            })
        })
      },
        error => {
          console.log('2获取文件失败', error)
          plus.nativeUI.toast("保存文件失败,请重新操作", {
            background: '#ffa38c',
          })
          return
        }
      )
    }, e => {
      console.log('1请求文件系统失败', e.message)
      plus.nativeUI.toast("请求系统失败,请重新操作", {
        background: '#ffa38c',
      })
      return
    })
  })

}
export default addData


3.文件格式

plus.io手机文件内容获取、修改_文件系统

四、重写文件

1.给文件重置信息的页面page.js

import changeData from '../utils/changeData.js' //方法:修改文件数据

// 修改数据 
  async changeData(boxId, index) {
    // 更新到文件
    await changeData('config.txt', 0, list)
  }


2.文件重置信息方法

function changeData(path, seek, writeData) {
  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',
              })
              return
            }
            writer.onsuccess = function () { //填写文件成功
              plus.nativeUI.closeWaiting()
              plus.nativeUI.toast("修改信息成功", {
                background: 'rgba(255, 255, 255, 0.6)',
              })
              resolve('1')
            }
          },
            error => {
              console.log('3创建creactWriter失败', error)
              plus.nativeUI.toast("保存文件失败,请重新操作", {
                background: '#ffa38c',
              })
              return
            })
        })
      },
        error => {
          console.log('2获取文件失败', error)
          plus.nativeUI.toast("保存文件失败,请重新操作", {
            background: '#ffa38c',
          })
          return
        }
      )
    }, e => {
      console.log('1请求文件系统失败', e.message)
      plus.nativeUI.toast("请求系统失败,请重新操作", {
        background: '#ffa38c',
      })
      return
    })
  })
}
export default changeData