uniapp手机端图片缓存方案

uniapp手机端图片缓存方案

思路：定义缓存图片key值规则，每次加载网络图片时，首先根据key获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回本地图片路径去渲染显示，若没有缓存数据，就用图片网络路径去下载并保存到本地

1. 定义获取缓存图片的全局js函数

/*
 * @description 获取文件的缓存路径，如果文件未缓存，则直接返回网络路径，并下载缓存
 * @method getImageCache
 * @param {String} filePath 完整的图片下载路径，如果没有从缓存中获取到，则用这个路径去下载
 * @param {String} fileMd5 文件md5，必须唯一
 * @return {Object} promise对象
*/

const getImageCache = function(filePath, fileMd5) {
	// 图片缓存key值
	let storageKey = 'IMAGE_CACHE_INFO_' + fileMd5
	// 首先获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回
	const cacheFileInfo = uni.getStorageSync(storageKey)
	if (cacheFileInfo) {
		console.log("已缓存为：" + cacheFileInfo)
		return cacheFileInfo
	} else {
		console.log("未缓存,进行下载保存")
		// 如果没有，执行下载，并存储起来后
		uni.downloadFile({
		    url: filePath,
		    success: (res) => {
		        if (res.statusCode === 200) {
		            console.log('下载成功');
					// 再进行本地保存
					uni.saveFile({
					      tempFilePath: res.tempFilePath,
					      success: function (res2) {
							  console.log(res2.savedFilePath)
							  uni.setStorageSync(storageKey, res2.savedFilePath)
							  return res2.savedFilePath
					      },
						  fail: function (res2) {
						  	return filePath
						  }
					    })
		        } else {
					console.log('下载临时文件失败')
					return filePath
				}
		    },
			fail: (res) => {
				console.log(res)
				return filePath
			}
		})
	}
}

2.封装一个加载缓存图片的组件

<template>
	<view class="wrap">
		<image :src="src" :style="{width: width,height:height,borderRadius:radius}"></image>
    </view> 
</template>

<script>
	export default {
		props: {
			url: {
				type: String,
				default(){
					return ''
				}
			},
			fileMd5: {
				type: String,
				default(){
					return ''
				}
			},
			width: {
				type: String,
				default(){
					return '';
				}
			},
			height: {
				type: String,
				default(){
					return '';
				}
			},
			radius: {
				type: String,
				default(){
					return '';
				}
			}
		},
		data() {
			return {
					src: '' // 图片地址
			}
		},
		watch: {
			// 监听头像md5值的变化
			fileMd5(val) { 
				// 查找获取图片缓存
				this.getImageCache()
			}
		},
		created() {
			// 查找获取图片缓存
			this.getImageCache()
		},
		methods: {
			// 查找获取图片缓存
			async getImageCache() { 
				// #ifdef APP-PLUS
				var result = await this.$util.getImageCache(this.url, this.fileMd5)
				if (result) {
					this.src = result
				} else {
					this.src = this.url
				}
				// #endif
				// #ifndef APP-PLUS
				this.src = this.url
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
	}
</style>

3.调用
正确引入组件后

<cache-image v-if="avatarMd5" :url="avatar" :fileMd5="avatarMd5" width="140rpx" height="140rpx" radius="100%"></cache-image>

便能实现手机端缓存网络图片功能，每次加载图片根据设定的key去查缓存数据，没有便下载并保存到本地，下次加载就会是直接拿的本地缓存图片的地址