移動端 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.獲取手機系統所有目錄檔案

 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會結合本篇文章中使用的方法，對本地檔案以及線上快取資料，資料儲存，等做出完整的案例，有興趣的夥伴們可以關注留言，一起學習哦！