小程序本地存储-画图程序不能存储
发布时间:2023-03-22 07:26 浏览次数:次 作者:佚名
处理思路很简单,判断该图片缓存过,若已缓存过、从storage中取出,没有的话、下载并缓存。
废话不多说,上代码。已封好成组件啦!各位小主放心食用~
let getImageCache =( key,url ) =>{
return new Promise((resolve,reject) => {
const path = wx.getStorageSync ( key )
if ( path ) {
resolve ( path )
} else {
wx.downloadFile ( {
url : url,
success : function ( res ) {
if ( res.statusCode === 200 ) {
// console.log ( '图片下载成功')
const fs = wx.getFileSystemManager ()
fs.saveFile ( {
tempFilePath : res.tempFilePath,
success ( res ) {
// console.log ( '图片缓存成功')
wx.setStorageSync ( key, res.savedFilePath )
resolve( res.savedFilePath)
}
} )
} else {
reject( res.statusCode)
}
}
} )
}
})
}
module.exports = {
getImageCache
}
把上面的代码放在一个js里扔进工具库里就可以了~我取名是imageCache.js
接下来是无脑使用说明
Step1:引入小程序本地存储,后面路径根据自己的文件路径改一下
import { getImageCache } from '../../utils/imageCache.js'
Step2:使用,getImageCache ()需要传两个参数小程序本地存储,一个是存在storage里的key值,一个是value值(也就是要缓存的网络图片路径)res返回的是缓存在小程序的路径。
getImageCache ( 'image_defaultUserImg',
'https://wport.oss-cn-beijing.aliyuncs.com/67643bc9fac7821fca354c73c1e81659.png?x-oss-process=image/resize,w_500' ).then(res=>{
this.setData ( {
defaultUserImg: res
})
})