使用uniapp实现小程序图片和视频的下载功能_uniapp 下载图片

提示：本人亲测可直接使用

---

一、封装下载js文件 download.js？

const app = getApp()
export default {
	  /**
	   * 保存图片
	   * url 图片url地址
	   * is_video是否视频
	   */
	saveImage: function(url,is_video) {
		let that = this;
		// 向用户发起授权请求
		uni.authorize({
			scope: 'scope.writePhotosAlbum',
			success: () => {
				  // 已授权
				that.downLoadImg(url,is_video);
			},
			fail: () => {
				  // 拒绝授权，获取当前设置
				uni.getSetting({
					success: (result) => {
						if (!result.authSetting['scope.writePhotosAlbum']) {
							that.isAuth()
						}
					}
				});
			}
		})
	  },
	/**
	 * 下载资源，保存图片到系统相册
	 */
	downLoadImg: function(url,is_video) {
		uni.showLoading({
			title: '加载中'
		});
		uni.downloadFile({
			url : url,
			success: (res) => {
				uni.hideLoading();
				if (res.statusCode === 200) {
					if(is_video==false){
						// 图片下载
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "已保存到相册",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}else{
						// 视频下载
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "已保存到相册",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						})
					}
					
				}else {
					uni.showToast({title:"资源格式错误，请联系管理员",icon: "none"});
				}
			},
			fail: (err) => {
				uni.showToast({title: "保存失败，请联系管理员",icon: "none"});
			}
		})
	},
	/*
	 * 引导用户开启权限
	 */
	isAuth: function() {
		uni.showModal({
			content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
			success: (res) => {
				if (res.confirm) {
					uni.openSetting({
						success: (result) => {
							console.log(result.authSetting);
						}
					});
				}
			}
		});
	},
}

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

二、使用

1.在 main.js引用

import imgDown from "./utils/download.js"
Vue.prototype.$imgDown = imgDown
1
2

2.页面使用

url: http 图片/视频
is_video：false图片下载 true视频下载

this.$imgDown.saveImage(url,is_video)
1

---

总结

提示：这是使用的小程序，可以去体验