当前位置:首页 > uni-app

uniapp 文件读写

2026-03-05 01:44:13uni-app

uniapp 文件读写操作指南

文件系统基础

uniapp的文件系统基于HTML5的File API和微信小程序等平台的本地文件系统能力。不同平台的文件读写方式略有差异,需注意平台兼容性。主要涉及临时文件、本地文件和沙盒文件系统。

选择文件

使用uni.chooseFile方法从设备选择文件:

uni.chooseFile({
  count: 1,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    console.log('文件路径:', tempFilePaths[0]);
  }
});

参数count控制选择文件数量,返回的tempFilePaths为临时文件路径数组。

读取文件内容

通过uni.getFileSystemManager().readFile读取文件:

const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: tempFilePath,
  encoding: 'utf8',
  success: (res) => {
    console.log('文件内容:', res.data);
  }
});

设置encoding参数可指定编码格式(如base64utf8)。

写入文件

使用uni.getFileSystemManager().writeFile写入文件:

fs.writeFile({
  filePath: `${wx.env.USER_DATA_PATH}/example.txt`,
  data: 'Hello uniapp',
  encoding: 'utf8',
  success: () => {
    console.log('写入成功');
  }
});

wx.env.USER_DATA_PATH为微信小程序的用户目录路径,其他平台需使用对应路径常量。

文件操作

  • 删除文件

    fs.unlink({
      filePath: filePath,
      success: () => {
        console.log('删除成功');
      }
    });
  • 文件信息

    fs.stat({
      path: filePath,
      success: (res) => {
        console.log('文件大小:', res.size);
      }
    });

注意事项

  1. iOS和Android平台的文件系统权限不同,需在manifest.json中配置所需权限。
  2. 临时文件路径在应用关闭后可能失效,重要文件应保存到持久化目录。
  3. H5端受浏览器安全限制,某些操作需用户主动触发。

跨平台兼容方案

推荐使用uni.saveFile保存持久化文件:

uniapp 文件读写

uni.saveFile({
  tempFilePath: tempFilePath,
  success: (res) => {
    console.log('保存路径:', res.savedFilePath);
  }
});

该方法会自动处理各平台的路径转换问题。

标签: 文件uniapp
分享给朋友:

相关文章

vue实现静态文件下载

vue实现静态文件下载

实现静态文件下载的方法 在Vue项目中实现静态文件下载可以通过多种方式完成,以下是几种常见的方法: 使用<a>标签下载 将静态文件放置在项目的public目录下,通过<a>…

uniapp部署到服务器

uniapp部署到服务器

部署准备 确保本地开发环境已完成项目构建,生成静态文件(H5端为/dist/build/h5目录)。检查服务器环境是否安装Nginx/Apache等Web服务软件,并配置好域名解析。 上传文件 通过…

uniapp支付功能怎么实现

uniapp支付功能怎么实现

uniapp支付功能实现方法 准备工作 注册微信支付、支付宝等平台的开发者账号,获取必要的商户ID(mch_id)、API密钥(key)、应用ID(appid)等信息。确保项目已配置好相关支付SDK。…

uniapp改变checkbox选中状态

uniapp改变checkbox选中状态

修改 checkbox 选中状态的方法 在 uniapp 中修改 checkbox 的选中状态可以通过以下几种方式实现: 绑定 v-model 控制状态 通过数据绑定方式控制 checkbox 的…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

uniapp 壁纸

uniapp 壁纸

使用 Uniapp 开发壁纸应用的方法 实现壁纸展示与切换功能 在 Uniapp 中,可通过 swiper 组件实现壁纸轮播展示。结合 image 组件加载本地或网络壁纸资源,动态绑定 src 属性实…