当前位置:首页 > 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读取文件:

uniapp 文件读写

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为微信小程序的用户目录路径,其他平台需使用对应路径常量。

uniapp 文件读写

文件操作

  • 删除文件

    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保存持久化文件:

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

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

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

相关文章

css文件制作详细点

css文件制作详细点

CSS 文件制作指南 CSS(层叠样式表)用于控制网页的样式和布局。以下是详细的制作方法: 创建 CSS 文件 新建一个文本文件,将其保存为 .css 扩展名,例如 styles.css。确保文件名…

实现.vue文件

实现.vue文件

创建Vue单文件组件 Vue单文件组件(.vue文件)是Vue.js框架的核心特性之一,它将模板、脚本和样式封装在一个文件中。一个典型的.vue文件结构包含三个部分:<template>、…

uniapp应用市场

uniapp应用市场

uniapp应用市场概述 Uniapp作为跨平台开发框架,支持将代码编译到iOS、Android、Web及各类小程序平台。其应用市场(插件市场)是开发者获取扩展插件、模板、组件的重要资源库,涵盖UI组…

uniapp模板库

uniapp模板库

uniapp模板库推荐 官方模板库 uni-app官方提供多个模板,涵盖电商、社交、新闻等多个领域。这些模板可直接在HBuilderX中通过新建项目选择,包含基础结构和常用功能模块,适合快速启动项目。…

uniapp关闭侧滑

uniapp关闭侧滑

禁用全局侧滑返回功能 在pages.json中配置全局禁止侧滑返回: { "globalStyle": { "popGesture": "none" } } 禁用单个页面侧滑返回 在…

uniapp可以用vant吗

uniapp可以用vant吗

uniapp中使用Vant组件库的可行性 Vant是专为Vue.js设计的移动端组件库,而uniapp是一个跨平台开发框架。两者并非原生兼容,但可通过以下方式实现部分Vant组件的使用。 方法一:使…