提交 6fbfa03d 作者: 方治民

feat: 优化 CacheImage 组件,增加调试参数和本地文件适配

上级 07c4f5dc
...@@ -26,32 +26,47 @@ ...@@ -26,32 +26,47 @@
type: String, type: String,
required: true, required: true,
}, },
debug: {
type: Boolean,
default: false,
},
}) })
const src = ref() const src = ref()
const hashCacheKey = ref() const hashCacheKey = ref()
onMounted(() => { onMounted(async () => {
tryCache() await tryCache()
}) })
// 监听 src 变化 // 监听 src 变化
watch( watch(
() => props.src, () => props.src,
() => tryCache(), async () => await tryCache(),
) )
function log(...args: any[]) {
if (props.debug) {
console.log('[CacheImage]', ...args)
}
}
// 尝试缓存图片,如果失败则使用原始图片 // 尝试缓存图片,如果失败则使用原始图片
async function tryCache() { async function tryCache() {
let url = props.src let url = props.src
if (!url) {
return
}
// 如果是网络图片,则缓存到本地
if (url.startsWith('http')) {
// #ifdef APP-PLUS // #ifdef APP-PLUS
const hash = md5(url).toString() const hash = md5(url).toString()
hashCacheKey.value = `G_CACHE_IMAGE_${hash}` hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(hashCacheKey.value)) { if (uni.getStorageSync(hashCacheKey.value)) {
console.debug('CacheImage cache hit') log('cache hit', url)
url = uni.getStorageSync(hashCacheKey.value) url = uni.getStorageSync(hashCacheKey.value)
} else { } else {
console.debug('CacheImage cache miss') log('cache miss', url)
try { try {
const res = await uni.downloadFile({ url }) const res = await uni.downloadFile({ url })
if (res.statusCode === 200) { if (res.statusCode === 200) {
...@@ -66,13 +81,17 @@ ...@@ -66,13 +81,17 @@
// 缓存图片本地地址 // 缓存图片本地地址
uni.setStorageSync(hashCacheKey.value, url) uni.setStorageSync(hashCacheKey.value, url)
} else {
log('cache error', url, res)
url = props.src
} }
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
} }
console.debug(props.src, '=>', url, hash, hashCacheKey.value) log(props.src, '=>', url, hash, hashCacheKey.value)
// #endif // #endif
}
src.value = url src.value = url
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论