天天看点

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,注意其文件路径,可以是临时文件路径或永久文件路径 (本地路径) ,不支持网络路径

继续阅读