移動端 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會結合本篇文章中使用的方法，對本地文件以及在線緩存數據，數據存儲，等做出完整的案例，有興趣的伙伴們可以關注留言，一起學習哦！