uniapp使用uni.downloadFile(OBJECT)结合uni.storage/uni.getstorage实现离线缓存

uni.downloadFile(OBJECT)

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
https://uniapp.dcloud.net.cn/api/request/network-file.html
示例

uni.downloadFile({
	url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});

1
2
3
4
5
6
7
8
9

uni.saveFile(OBJECT)

保存文件到本地。
https://uniapp.dcloud.net.cn/api/file/file.html#savefile
示例代码：

uni.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    uni.saveFile({
      tempFilePath: tempFilePaths[0],
      success: function (res) {
        var savedFilePath = res.savedFilePath;
      }
    });
  }
});

1
2
3
4
5
6
7
8
9
10
11
12

实现代码功能逻辑
主页面index.vue

<template>
	<view>
		<view class="wrap" v-for="(item,index) in mateList" :key="index">
			<image :src="item.src" class="images-content"></image>
			<video :src="item.video"class="images-content"></video>
		</view>
			
	</view>
	</view>
</template>

<script>
	import {
		getImageFile,
		getVideoFile
	} from "@/utils/InfoFile.js"
	export default {
		data() {
			return {
				avatarMd5: '',
				getnetwork: true,
				datalist:[],
				mateList: [{
						content:'荷花图片',
						src: 'https://lmg.jj20.com/up/allimg/tp10/211224122S31944-0-lp.jpg',
						video:'http://vd3.bdstatic.com/mda-ni68ppt2xqskeu9v/360p/h264/1662530911412069950/mda-ni68ppt2xqskeu9v.mp4'
					},
					{
						content:'牡丹花',
						src: 'https://lmg.jj20.com/up/allimg/tp09/21031FKU44S6-0-lp.jpg',
						video:'http://vd3.bdstatic.com/mda-ni68ppt2xqskeu9v/360p/h264/1662530911412069950/mda-ni68ppt2xqskeu9v.mp4'
					},
					{
						content:'牵牛花',
						src: 'https://lmg.jj20.com/up/allimg/1113/052420110515/200524110515-1-1200.jpg',
						video:'http://vd3.bdstatic.com/mda-ni68ppt2xqskeu9v/360p/h264/1662530911412069950/mda-ni68ppt2xqskeu9v.mp4'
					}
				],
				avatar: 'https://lmg.jj20.com/up/allimg/tp10/211224122S31944-0-lp.jpg',
				imagesrc: 'https://lmg.jj20.com/up/allimg/tp09/21031FKU44S6-0-lp.jpg',
			}
		},

		onLoad() {
			
		},
		created() {
			// 查找获取图片缓存
			// this.getImageCache()
			const value = uni.getStorageSync('cache_info')
			uni.getNetworkType({
				success: (res) => {
					if(res.networkType == 'none') {
						this.mateList = value
						console.log('5545455555', this.mateList);
					}else{
						if(value){
							this.mateList = value
						} else {
							this.getInfoCache()
						}
						
						
					}
				}
			})
			
			
		},
		methods: {
			getInfoCache() {
				let fileList = JSON.parse(JSON.stringify(this.mateList))
				const downloadList = []
				fileList.forEach((item, index, arr) => {
					downloadList.push(getImageFile(item.src, item, index, arr), getVideoFile(item.video,item, index, arr))
				})
				Promise.all(downloadList).then(res => {
					console.log('23332322',res);
					console.log('535656556',fileList);
					if(res) {
						uni.setStorage({
							key: 'cache_info',
							data: fileList
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.images-content {
		width: 200rpx;
		height: 200rpx;
	}

	.cache-box {
		display: flex;
	}

	.wrap {
		display: flex;
		justify-content: space-between;
		margin: 50rpx ;
	}

	.button-style {
		margin: 50rpx;
		// font-size: 30rpx;
		color:#fff;
		width: 120rpx;
		text-align: center;
		border-radius: 8rpx;
		padding: 10rpx;
		height: 40rpx;
		background-color: cornflowerblue;
		line-height: 40rpx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

自定义封装成promise对象的js文件

import app from '@/main'
export function getImageFile(filePath,item,index,arr) {
	return new Promise((resolve, reject) => {
	// uni.downloadFile是下载文件到本地，返回文件临时路径
		// let storageKey = 'IMAGE_CACHE_INFO_'
		uni.downloadFile({
			url: filePath, //文件地址
			// 成功回调
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('2223366', res.tempFilePath);
					uni.saveFile({ //文件保存到本地
						tempFilePath: res.tempFilePath, //临时路径
						success: (res1) => {
							// console.log('6666', res1.savedFilePath);
							arr[index].src = res1.savedFilePath
							// item.imgsrc = res1.savedFilePath
							// app.$set(item,'imgsrc',res1.savedFilePath)
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存：' + res1.savedFilePath, //保存路径
								duration: 3000,
							});
							resolve(res1.savedFilePath)
							// return res1.savedFilePath
						}
					});
				}else {
					console.log('下载临时文件失败')
					reject('下载失败:' + filePath);
					// return filePath
				}
			},
			fail: (err) => {
				console.log(err);
				reject(filePath)
				return filePath
			},
		})
	})	
}
export function getVideoFile(filePath,item,index,arr) {
	return new Promise((resolve, reject) => {
	// uni.downloadFile是下载文件到本地，返回文件临时路径
		uni.downloadFile({
			url: filePath, //文件地址
			// 成功回调
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('2223366', res.tempFilePath);
					uni.saveFile({ //文件保存到本地
						tempFilePath: res.tempFilePath, //临时路径
						success: (data) => {
							console.log('6666', data.savedFilePath);
							arr[index].video = data.savedFilePath
							// item.videosrc = data.savedFilePath
							// app.$set(item,'videosrc',data.savedFilePath)
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存：' + data.savedFilePath, //保存路径
								duration: 3000,
							});
							resolve(data.savedFilePath)
							// return res1.savedFilePath
						}
					});
				}else {
					console.log('下载临时文件失败')
					return filePath
					reject('下载失败:' + filePath);
				}
			},
			fail: (err) => {
				console.log(err);
				return filePath
				reject('下载失败:' + filePath);
			},
		})
	})	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

效果：

断网状态从本地获取图片、视频；本地已经保存了图片
视频

实现的本地缓存的解决方式已经提供，看到这篇文章的小伙伴，麻烦给博主一个关注，你的关注是我进步的动力