uniapp 图片缓存

思路：

最近遇到项目图片很多导致加载数据很慢，所以想到了缓存图片到本地，然后直接加载本地的图片。具体思路大概就是首先加载本地图片，如果本地图片不存在image组件会调用error事件，error事件中处理两件事。

1. 把路径修改为服务器地址的路径
2. 将图片保存到本地

讲解之前需要了解一下后台返回的图片地址，如图所示。这里我都是直接修改的返回后的Attachment属性，马赛克部分实际就是你的服务器地址。最主要的就是多张图片的路径使用了逗号隔开。三种路径的文件名(形如 2781c620-af5e-4293-b73d-f254e989b9f2.jpg)是不会改变的，所以就根据这个找到对应的图片。

获取并将图片修改为本地图片路径

每次获取后台数据时就会调用getLocalPath方法。list是后台返回的数组对象(包括图片路径)

this.getLocalPath(list, this.fixPath)

如下时getLocalPath和fixPath的方法

			// 获取本地图片地址, 使用callback的原因传递data
			// requestFileSystem方法可去HTML5查询
			getLocalPath(list, callback) {
				plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, (fs) => {
				// 在外部定义变量获取fullPath属性无法成功，所以需要使用回调函数
					fs.root.createReader().readEntries((entries) => {
						let data = [];
						for (var i = 0; i < entries.length; i++) {
							data.push(entries[i].fullPath);
						}
						callback && callback(data, list)
					});
				})
			},
			fixPath(data, list) {
				list.forEach(item => {
					let arr = item.Attachment.split(',')
					// 因为项目需要我都只是将返回的图片数组的首个图片改为本地路径
					let pathArr = arr[0].split('/')
					// filename就是文件名(形如 2781c620-af5e-4293-b73d-f254e989b9f2.jpg)
					let filename = pathArr[pathArr.length - 1]
					let filePath = data.find(path => path.includes(filename))
					filePath && arr[0] = 'file://' + filePath
					item.Attachment = arr.join(',')
				})
			},

网络路径和图片缓存

image组件未加载出来图片（此时的图片路径实际已经被修改成本地路径），调用error事件，代码如下：

imageError(item, httpUrl) {
				// httpUrl其实就是服务器的主机名（形如 http://198.168.1.1/）。
				let arr = item.Attachment.split(',')
				// 防止轮播图原因触发四次，这个可以忽略
				if (arr[0].includes(httpUrl)) return
				// 修改第一张图片路径为服务器地址（实际就是加上httpUrl）
				arr[0] = httpUrl + arr[0]
				// 调用set方式让Attachment属性实现响应式
				this.$set(item, 'Attachment', arr.join(','))
				// #ifdef APP-PLUS
				// 直接下载图片到本地，具体可以查看HTML5+的文档
				plus.downloader.createDownload(item.Attachment.split(',')[0], {}, (d, status) => {
					status != 200 && console.log('error')
				}).start()
				// #endif

最后，自己也是边学边做，初入职场的小菜鸡一枚，所以可能会有很多问题。希望指正。