天天看點

uni-app處理圖檔亂碼

向後端發送請求擷取圖檔,得到的響應資料是一堆火星文,如下,找度娘了解一番,這是一堆二進制亂碼,主要問題是由于uni.request發請求時,設定的responseType不對或者根本就沒設定

uni-app處理圖檔亂碼

2.1 在uni.request請求中,配置responseType為"arraybuffer";

用到什麼便學什麼,是以了解一下responseType:

responseType屬性它主要是用來設定響應資料的類型,預設為“text”類型

responseType屬性值有(寫幾個常見一點的):""(空字元串),arraybuffer(是一個包含二進制資料的js ArrayBuffer),blob(一個包含二進制資料的Blob對象),json,text

2.2 設定requestType為"arraybuffer"後,你會發現得到的響應資料是,arraybuffer類型的執行個體,如下:

uni-app處理圖檔亂碼

2.3 使用uni.arrayBufferToBase64()方法将響應資料轉換為base64格式的資料

2.4 再在上述2.3上得到的base64格式的資料加上'data:image/png;base64,' 的字首,進而得到圖檔的src路徑

2.5 我的功能需求還需要進行儲存圖檔,繼續實作儲存圖檔

重點方法提取:(詳解能力還不達标,(╥╯^╰╥) 菜鳥copy階段)

uni.getFileSystemManager()=>擷取全局唯一的檔案管理器,所謂檔案管理器,顧名思義就是對檔案進行管理的,可以對檔案進行建立,修改,存儲等=>傳回FileSystemManager

FileSystemManager.writeFile()=>寫入一個檔案,主要參數如下

uni-app處理圖檔亂碼

額外說一下wx.env.USER_DATA_PATH方法=>我們的檔案有一種為本地使用者檔案,開發者對該目錄可以進行自由的讀寫,其中通過該方法就可以擷取這個目錄的路徑

uni.saveImageToPhotosAlbum({})=>儲存圖檔到系統檔案,主要參數為filePath,注意其檔案路徑,可以是臨時檔案路徑或永久檔案路徑 (本地路徑) ,不支援網絡路徑

繼續閱讀