功能介绍:uniapp 多张图片本地存储,下载进度条。文章来源:https://www.toymoban.com/news/detail-601230.html
this.pictureLength = data.drawings.length //获取下载图片总条数
data.drawings.map((el,index)=>{
this.getFileCache(el.pic,el.id,index) //调用下载
})
//图纸数据下载====>异步无法估计时间
getFileCache(filePath, fileId,index){
const storageKey = 'IMAGE_CACHE_INFO'
const downloadTask = uni.downloadFile({
url: filePath,
success: ({
statusCode,
tempFilePath
}) => {
if(statusCode !== 200) return reject('下载失败')
uni.saveFile({
tempFilePath,
success: ({
savedFilePath
}) => {
let storageInfo = Object.assign({}, uni.getStorageSync(storageKey));
storageInfo[fileId] = savedFilePath;
uni.setStorageSync(storageKey, storageInfo);
}
})
},
fail: (e) => {
reject('下载失败')
}
});
//进度条进度
downloadTask.onProgressUpdate((res) => {
this.time[index] = res.progress
var all = 0
for(let i = 0; i < this.time.length; i++) {
let cur = this.time[i];
all = all + cur
}
if(this.progress !=all/this.pictureLength){
this.progress =all/this.pictureLength
if(this.progress===100){
this.show = false //关闭进度条
let errs = this.$t('success')
uni.showToast({
title: errs,
icon:'none',
duration: 2000,
});
}
}
})
},
目前还差一个删除功能,有机会再加上文章来源地址https://www.toymoban.com/news/detail-601230.html
到了这里,关于uniapp 图片本地缓存,本地路径离线使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!