移动端 h5 uniapp 读,写,删本地文件或sd文件

应用场景:
    
当我们需要做离线应用或者是加载本地文件时使用到此方法。(本篇文章给大家分享访问app私有文件目录,系统公共目录,sd外置存储的文件添加修改
使用方法:
   
 1.我们主要是使用的HTML5+API的io模块
    2.使用HTML5+API的sqlite模块(此方法会在下一篇分享)
注意事项:
   
 1.本篇文章主要在ipadandroid上做测试使用暂未在ios做测试。
    2.本篇文章代码主要通过uniapp项目测试使用,H5页面需对应添加手机权限设置,授权具体移步百度。
读取手机外置SD卡注意事项:
    
1.安卓10以下可以允许访问 sd卡及公共磁盘文件  暂未区分磁盘信息。
    2.安卓10以上不可以访问sd卡文件,只可访问app下载目录系统公共文件目录
    3.读取sd卡一定要添加读写手机文件权限,否则会读取失败。
方法介绍:
    
1.读取sd卡文件
    2.修改sd卡文件
    3.删除sd卡文件
    4.app沙盒目录文件的读写删(app所属目录下的documents文件)

1.获取手机系统所有目录文件

 1 plus.io.resolveLocalFileSystemURL(
2 "file:///storage",
3 function(entry) {
4 /* 获取文件目录 */
5 var directoryReader = entry.createReader(); //获取读取目录对象
6 directoryReader.readEntries(
7 function(entries) { //历遍子目录即可
8 for (var i = 0; i < entries.length; i++) {
9 console.log("文件信息:" + entries[i].name);
10 }13 },
14 function(err) {
15 console.log("访问目录失败");
16 });
17 },
18 function(err) {
19 console.log("访问指定目录失败:" + err.message);
20 });
注意:file:///storage是手机系统的跟目录,我们可以通过此方法获取到手机系统根的所有目录。

C171-1501:是内存卡在手机中的文件夹名称
emulated:是系统存储路径

  

如图: 

所以我们访问sd卡的路径则为"file:///storage/C171-1501/xxx",访问系统目录文件跟路径则是"file:///storage/emulated/0"

需要注意的是xxx是我们的文件夹下的文件

当访问系统目录时我们就可以使用系统目录文件拼接到所对应的文件名称即可。
ps:访问系统相册地址"file:///storage/emulated/0/DCIM/Camera"

注意:
  从android10以上开始用户只能访问手机公共目录,比如图片文件公共下载地址等。

  

总结:我们使用此方法就可以逐级查找手机系统中每个文件目录所对应的文件了,即便你不知道某一个文件在那个地方也可以通过file:///storage去逐级查找,此方法可以访问手机任何存储目录!!!

2.获取指定文件内容 SD或手机其他目录文件

先上代码:

 1 plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fobject) {
2 fobject.root.getFile(
3 "file:///storage/C171-1501//hxwm/data/对口升学-一本学记39/course_static_detail_78", {
4 create: false
5 },
6 function(fileEntry) {
7 fileEntry.file(function(file) {
8 console.log(file, 'file')
9 var fileReader = new plus.io.FileReader();
10 fileReader.readAsText(file, 'utf-8');
11 fileReader.onloadend = function(evt) {
12 let decrypted = CryptoJS.AES.decrypt(evt.target.result, CryptoJS.enc
13 .Base64.parse('uE3okdCj6U7tVBi5AhatfA=='), {
14 mode: CryptoJS.mode.ECB,
15 padding: CryptoJS.pad.Pkcs7
16 });
17 let renderData = JSON.parse(CryptoJS.enc.Utf8.stringify(decrypted)
18 .toString())21 }
22 });
23 },
24 function(error) {
25 uni.hideLoading();
26 uni.showToast({
27 title: '暂无数据',
28 icon: 'none'
29 });
30 console.log(error)
31 });
32
33 });

注意:

我们使用的plus.io.PUBLIC_DOCUMENTS是对应手机的文件权限,具体可通过HTML5+API查看

file:///storage/C171-1501//hxwm/data/对口升学-一本学记39/course_static_detail_78
此地址是我手机外置sd卡文件存储路径,其中
file:///storage/C171-1501/是sd卡的跟路径其余是路径下某一文件夹下的文件。

读取成功之后的回调打印:

读取文件内容:

此文件你可以任意格式。

注意:
  通过方法一知道文件路径以后即可使用此方法获取到文件路径,需要注意的是从android11开始将不再允许访问其它文件目录了,需要注意!!!
  如果我们展示图片或者是视频资源直接在标签内的src填写对应地址即可:
  <image src="
file:///storage/C171-1501//img/1.png" mode=""></image>

3.app根目录文件 下载 修改 删除

  • 创建本地文件并写入数据
 1 plus.io.requestFileSystem(
2 plus.io.PUBLIC_DOCUMENTS, // 文件系统中的根目录
3 fs => {
4 // 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
5 fs.root.getFile(filename, {
6 create: true // 文件不存在则创建
7 }, fileEntry => {
8 // 文件在手机中的路径
9 console.log(fileEntry.fullPath)
10 fileEntry.createWriter(writer => {
11 // 写入文件成功完成的回调函数
12 writer.onwrite = e => {
13 console.log("写入数据成功");15 };
16 // 写入数据
17 writer.write(JSON.stringify(data));
18 })
19 }, e => {
20 console.log("getFile failed: " + e.message);
21 });
22 },
23 e => {
24 console.log(e.message);
25 }
26 );

此文件是我们测试数据所创建存储的文件,注意我们存储文件的目录地址是默认app安装包根目录下的documents文件夹下!!!

  • 读取本地文件

  

 1 plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
2 // fs.root是根目录操作对象DirectoryEntry
3 let a = fs.root.toURL()
4
5 fs.root.getFile(a + '/' + 'a/a.json', {
6 create: false
7 }, function(fileEntry) {
8 fileEntry.file(function(file) {
9 var fileReader = new plus.io.FileReader();
10 fileReader.readAsText(file, 'utf-8');
11 fileReader.onloadend = function(evt) {
12 var news = [];
13 var result = evt.target.result;
14 if (result != "")
15 callback({
16 state: 1,
17 message: "读取成功!",
18 data: result
19 });
20 }
21 });
22 });
23 })
  let a = fs.root.toURL()通过此方法我们可获取存储在app私用环境下的相对跟路径。
  • 删除本地文件
 1 var dirPath = '';
2 plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
3 // fs.root是根目录操作对象DirectoryEntry
4 let a = fs.root.toURL();
5 dirPath = a + '/' + 'a/a.json';
6 plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {
7 //读取这个目录对象
8 var directoryReader = entry.createReader();
9 //读取这个目录下的所有文件
10 directoryReader.readEntries(function(entries) {
11 //如果有才操作
12 console.log(entries, 'entries')
13 if (entries.length > 0) {
14 //删除目录将会删除其下的所有文件及子目录 不能删除根目录,如果操作删除根目录
15 //将会删除目录下的文件及子目录,不会删除根目录自身。 删除目录成功通过succesCB
16 //回调返回,失败则通过errorCB返回。
17 entry.removeRecursively(function(entry) {
18 callback();
19 console.log('删除成功回调')
20 //删除成功回调
21 }, function(e) {
22 //错误信息
23 console.log(e.message + ' ?!')
24 })
25 }
26 })
27 })
同样的,删除文件我们只需要写入对应的文件地址即可删除文件。

  

总结:

    现在手机的限制越来越多,能够我们操作的权限很少了,只可以操作少量的公共目录,和app私有的沙盒目录,那么有想要操作其他目录文件的只好把手机降级到android10及以下,根据自己的业务需求和用户需求吧!目前绝大多数的app做轻量的本地缓存使用方法三将文件数据缓存进沙盒目录下即可!

    有一点记住,缓存在沙盒的文件会随着删除app一块删除掉!

    那么我这篇文章呢对于代码的解释很少的,主要就是对方法的展示,本篇所使用到的方法均来自HTML5+API的io模块,需要的兄弟们可以自行前往查看!

    下一篇给大家分享下移动端的前端数据库SQLite会结合本篇文章中使用的方法,对本地文件以及在线缓存数据,数据存储,等做出完整的案例,有兴趣的伙伴们可以关注留言,一起学习哦!

 

移动端 h5 uniapp 读,写,删本地文件或sd文件的更多相关文章

  1. asp.net 文件操作小例子(创建文件夹,读,写,删)

      静态生成要在虚拟目录下创建文件夹 来保存生成的页面 那么就要对文件进行操作 一.创建文件夹 using System.IO; string name = "aa"; strin ...

  2. 移动端H5选择本地图片

    移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...

  3. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  4. 移动端App uni-app + mui 开发记录

    前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原 ...

  5. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. iOS关于NSUserDefaults存,写, 删的问题

      我们知道NSUserDefaults可以保存某些信息在本地,例如登录的账号,密码等等,当我们使用NSUserDefaults时,它是将信息写入到本地的一个plist文件里,我们都知道 删除plis ...

  7. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  8. 移动端H5页面之iphone6的适配(转)

    iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H ...

  9. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

随机推荐

  1. 20210821 打表,蛇,购物,ants

    考场 T1 没看懂 T4 一眼回滚莫队,但忘记怎么写了,小慌 模拟 T1 题意的时候教练让 zsy 澄清了一下,确定了我不会做... T2 一看就是毒瘤题,T3 感觉比较可做 T4 确定了回滚的细节, ...

  2. JS005. 拷贝引用数据类型Array使其指向不同堆的解决方案

    一个很常见的语法问题,但专注实现需求时经常会忘记去避免,导致最终问题的出现,再花时间排查.为此专门整理一篇解决方法的博客,也加强一下自己的记忆. TAG: JSON.parse() JSON.stri ...

  3. python库--flask--创建嵌套蓝图

    这里没有对内容进行py文件分割, 可以自己根据框架自己放入对应位置 以下代码生成一个 /v1/myapp/test 的路由 from flask import Flask app = Flask(__ ...

  4. RocketMQ详解(一)原理概览

    专题目录 RocketMQ详解(一)原理概览 RocketMQ详解(二)安装使用详解 RocketMQ详解(三)启动运行原理 RocketMQ详解(四)核心设计原理 RocketMQ详解(五)总结提高 ...

  5. 并发编程之:ForkJoin

    大家好,我是小黑,一个在互联网苟且偷生的农民工. 在JDK1.7中引入了一种新的Fork/Join线程池,它可以将一个大的任务拆分成多个小的任务并行执行并汇总执行结果. Fork/Join采用的是分而 ...

  6. windows安装python2.7、python3.7和pycharm

    下载安装包 下载可执行文件 安装 安装2.7 安装pycharm

  7. 使用jemeter构造各种变量数据

    使用手动创建测试数据太麻烦,因此考虑用jmeter写了一些创建测试数据的脚本,针对那些变量非固定的数据可以利用函数来实现 通过函数助手添加各种变量数据 Tools--->函数助手 1:生成当前时 ...

  8. 鸿蒙内核源码分析(文件系统篇) | 用图书管理说文件系统 | 百篇博客分析OpenHarmony源码 | v63.01

    百篇博客系列篇.本篇为: v63.xx 鸿蒙内核源码分析(文件系统篇) | 用图书管理说文件系统 | 51.c.h.o 文件系统相关篇为: v62.xx 鸿蒙内核源码分析(文件概念篇) | 为什么说一 ...

  9. 鸿蒙内核源码分析(任务管理篇) | 任务池是如何管理的 | 百篇博客分析OpenHarmony源码 | v5.05

    百篇博客系列篇.本篇为: v05.xx 鸿蒙内核源码分析(任务管理篇) | 任务池是如何管理的 | 51.c.h .o 任务管理相关篇为: v03.xx 鸿蒙内核源码分析(时钟任务篇) | 触发调度谁 ...

  10. Spring,IOC源码分析

    有错勿喷 1.首先是Spring,IOC的基本概念 IOC是一个容器 容器启动的时候创建所有单实例对象 我们可以直接从容器中获取到这个对象 2.调试流程 ioc容器的启动过程?启动期间都做了什么(什么 ...