美文网首页
uniapp 读取本地文件

uniapp 读取本地文件

作者: 木火应 | 来源:发表于2023-06-21 01:53 被阅读0次
  • h5端
  1. 可以使用uni.request实现读取本地文件,示例代码:
uni.request({
  url: '/static/data.json',
  header: {
        'Content-Type': 'application/json; charset=utf-8'
      },
  success: function (res) {
    // 处理获取的本地JSON文件内容
    var data = res.data;
    // 调用其他方法进行数据操作
  }
});
  1. 以上data.json文件位于项目根路径下的static文件下,请根据实际情况修改
  • 微信小程序
  1. 将数据文件data.json放在项目根路径下并在main.js文件中导入为全局变量
import dataJson from './data.json'
Vue.prototype.$dataJson = dataJson
  1. 在其他页面或组件中,确保正确访问全局变量 this.$dataJson
export default {
  mounted() {
    console.log(this.$dataJson); // 确认是否正确获取到数据
  }
}
  • android端
  1. 需要使用 plus.io 模块来读取本地文件,data.json文件位于项目根路径的static文件下
plus.io.resolveLocalFileSystemURL('_www/static/data.json', (entry) => {
                    entry.file((file) => {
                        const fileReader = new plus.io.FileReader()
                        fileReader.onloadend = (evt) => {
                            const data = JSON.parse(evt.target.result)
                            console.log("成功...")
                            // 调用其他方法进行数据操作
                        }
                        fileReader.readAsText(file, 'utf-8')

                    })
                }, (err) => {
                    console.log("发生了错误", err)
                })
  1. manifest.json文件中配置plus权限
{
  "app-plus": {
    "permissions": {
      "plus": {
        "description": "访问系统文件",
        "features": [
          "io"
        ]
      }
    }
  }
}

相关文章

网友评论

      本文标题:uniapp 读取本地文件

      本文链接:https://www.haomeiwen.com/subject/ubuuydtx.html