提交 6fbfa03d 作者: 方治民

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

上级 07c4f5dc
...@@ -26,53 +26,72 @@ ...@@ -26,53 +26,72 @@
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
}
// #ifdef APP-PLUS // 如果是网络图片,则缓存到本地
const hash = md5(url).toString() if (url.startsWith('http')) {
hashCacheKey.value = `G_CACHE_IMAGE_${hash}` // #ifdef APP-PLUS
if (uni.getStorageSync(hashCacheKey.value)) { const hash = md5(url).toString()
console.debug('CacheImage cache hit') hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
url = uni.getStorageSync(hashCacheKey.value) if (uni.getStorageSync(hashCacheKey.value)) {
} else { log('cache hit', url)
console.debug('CacheImage cache miss') url = uni.getStorageSync(hashCacheKey.value)
try { } else {
const res = await uni.downloadFile({ url }) log('cache miss', url)
if (res.statusCode === 200) { try {
const { savedFilePath } = await new Promise<UniApp.SaveFileSuccess>((resolve, reject) => { const res = await uni.downloadFile({ url })
uni.saveFile({ if (res.statusCode === 200) {
tempFilePath: res.tempFilePath, const { savedFilePath } = await new Promise<UniApp.SaveFileSuccess>((resolve, reject) => {
success: (res) => resolve(res), uni.saveFile({
fail: (err) => reject(err), tempFilePath: res.tempFilePath,
success: (res) => resolve(res),
fail: (err) => reject(err),
})
}) })
}) url = `${savedFilePath}`
url = `${savedFilePath}`
// 缓存图片本地地址 // 缓存图片本地地址
uni.setStorageSync(hashCacheKey.value, url) uni.setStorageSync(hashCacheKey.value, url)
} else {
log('cache error', url, res)
url = props.src
}
} catch (e) {
console.error(e)
} }
} catch (e) {
console.error(e)
} }
log(props.src, '=>', url, hash, hashCacheKey.value)
// #endif
} }
console.debug(props.src, '=>', url, hash, hashCacheKey.value)
// #endif
src.value = url src.value = url
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论