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

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

应用场景：
　　　　当我们需要做离线应用或者是加载本地文件时使用到此方法。（本篇文章给大家分享访问app私有文件目录，系统公共目录，sd外置存储的文件添加修改）
使用方法：
　　　　1.我们主要是使用的HTML5+API的io模块
　　　　2.使用HTML5+API的sqlite模块（此方法会在下一篇分享）
注意事项：
　　　　1.本篇文章主要在ipad和android上做测试使用暂未在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.获取手机系统所有目录文件 

plus.io.resolveLocalFileSystemURL(
           "file:///storage",
            function(entry) {
                /* 获取文件目录 */
                var directoryReader = entry.createReader(); //获取读取目录对象
                directoryReader.readEntries(
                    function(entries) { //历遍子目录即可
                        for (var i = 0; i < entries.length; i++) {
                            console.log("文件信息：" + entries[i].name);
                        }13                     },
                    function(err) {
                        console.log("访问目录失败");
                    });
            },
            function(err) {
                console.log("访问指定目录失败:" + err.message);
            });

注意：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或手机其他目录文件

先上代码：

plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fobject) {
            fobject.root.getFile(
                "file:///storage/C171-1501//hxwm/data/对口升学-一本学记39/course_static_detail_78", {
                    create: false
                },
                function(fileEntry) {
                    fileEntry.file(function(file) {
                        console.log(file, 'file')
                        var fileReader = new plus.io.FileReader();
                        fileReader.readAsText(file, 'utf-8');
                        fileReader.onloadend = function(evt) {
                            let decrypted = CryptoJS.AES.decrypt(evt.target.result, CryptoJS.enc
                                .Base64.parse('uE3okdCj6U7tVBi5AhatfA=='), {
                                    mode: CryptoJS.mode.ECB,
                                    padding: CryptoJS.pad.Pkcs7
                                });
                            let renderData = JSON.parse(CryptoJS.enc.Utf8.stringify(decrypted)
                                .toString())21                         }
                    });
                },
                function(error) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '暂无数据',
                        icon: 'none'
                    });
                    console.log(error)
                });

        });

注意：

我们使用的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根目录文件 下载 修改 删除

• 创建本地文件并写入数据

plus.io.requestFileSystem(
            plus.io.PUBLIC_DOCUMENTS, // 文件系统中的根目录
            fs => {
                // 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
                fs.root.getFile(filename, {
                    create: true // 文件不存在则创建
                }, fileEntry => {
                    // 文件在手机中的路径
                    console.log(fileEntry.fullPath)
                    fileEntry.createWriter(writer => {
                        // 写入文件成功完成的回调函数
                        writer.onwrite = e => {
                            console.log("写入数据成功");15                         };
                        // 写入数据
                        writer.write(JSON.stringify(data));
                    })
                }, e => {
                    console.log("getFile failed: " + e.message);
                });
            },
            e => {
                console.log(e.message);
            }
        );

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

• 读取本地文件

　　

plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
            // fs.root是根目录操作对象DirectoryEntry
            let a = fs.root.toURL()

            fs.root.getFile(a + '/' + 'a/a.json', {
                create: false
            }, function(fileEntry) {
                fileEntry.file(function(file) {
                    var fileReader = new plus.io.FileReader();
                    fileReader.readAsText(file, 'utf-8');
                    fileReader.onloadend = function(evt) {
                        var news = [];
                        var result = evt.target.result;
                        if (result != "")
                            callback({
                                state: 1,
                                message: "读取成功！",
                                data: result
                            });
                    }
                });
            });
        })

  let a = fs.root.toURL()通过此方法我们可获取存储在app私用环境下的相对跟路径。

• 删除本地文件

var dirPath = '';
        plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
            // fs.root是根目录操作对象DirectoryEntry
            let a = fs.root.toURL();
            dirPath = a + '/' + 'a/a.json';
            plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {
                //读取这个目录对象    
                var directoryReader = entry.createReader();
                //读取这个目录下的所有文件    
                directoryReader.readEntries(function(entries) {
                    //如果有才操作   
                    console.log(entries, 'entries')
                    if (entries.length > 0) {
                        //删除目录将会删除其下的所有文件及子目录 不能删除根目录，如果操作删除根目录  
                        //将会删除目录下的文件及子目录，不会删除根目录自身。 删除目录成功通过succesCB  
                        //回调返回，失败则通过errorCB返回。  
                        entry.removeRecursively(function(entry) {
                            callback();
                            console.log('删除成功回调')
                            //删除成功回调    
                        }, function(e) {
                            //错误信息    
                            console.log(e.message + ' ?!')
                        })
                    }
                })
            })

同样的，删除文件我们只需要写入对应的文件地址即可删除文件。

　　

总结：

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

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

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

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