plus.io手機文件內容獲取、修改

plus.io 文件內容獲取、修改

零、前言

最近在做一個需要對手機文件進行獲取和修改的app,用到了h5+的plus.ioAPI,特此記錄

一、文件在手機中的地址

https://www.cnblogs.com/biuo/p/15419167.html

二、文件獲取

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.文件格式

四、重寫文件

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