uniapp手机端图片缓存方案
php数组中增加元素的方法：1、使用array_unshift()函数，向数组头插入新元素；2、使用array_push()函数，向数组末尾插入一个或多个新元素；3、使用array_splice()函数，向数组任意位置插入新元素。
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去查缓存数据，没有便下载并保存到本地，下次加载就会是直接拿的本地缓存图片的地址
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4160
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 
