解决uniapp小程序下载全部图片的问题

解决uniapp小程序下载全部图片的问题 代码如下：

遇到特殊情况： 如果遇到小程序预览时只有开启调试功能才能下载图片，说明你的服务器图片地址有误，要和后端人员确认下载接口的域名地址是否与下载图片的接口是否对应， 希望能帮到大家。

<template>
	<view>
		<!-- 限时推广页面 -->
		<view class="TimeLimit_Box">
			<view class="TimeLimit_card">
				<view class="title_view">
					{{ initData.title || '' }}
					<view class="TipsIcon">限时推广</view>
				</view>
				<view class="endTime_view">
					<view class="endTime_name">结束时间：</view>
					<view class="endTime">{{ initData.deadline }}</view>
				</view>
				<view class="task_Tips">
					<view class="Mission_statement">任务说明：</view>
					<view class="task_content">
						<view class="task_content1">1、一键保存图片到相册，复制文案，打开微信朋友圈，选择图片和文案发布；</view>
						<view class="task_content2">2、好友通过图片上的二维码访问相关页面，同一位好友1天内仅计一次访问。</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="Wechat_Moments">
					<view class="preview_text">朋友圈预览</view>
					<view class="Preview_Area">
						<view class="user_profile" style="width: 80rpx;"><image :src="userInfo.avatar"></image></view>
						<view class="Copywriting">
							<view class="user_name">{{ userInfo.nickname }}</view>
							<view class="Copywriting_content">{{ initData.content || '' }}</view>
							<view class="Picture_grid" :class="{ onlyImg: onlyImgShow }">
								<image :src="$url(item)" v-for="(item, index) in timeLimitImg" :key="index" @click="previewImage(index)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="tail_button">
				<view class="flot_bottom">
					<view class="button_right" @click="onDown"><view class="button_centent">下载全部图片</view></view>
					<view class="button_left" @click="copy"><view class="button_centent">复制文案</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

javascript代码片段：
<script>
export default {
	props: [],
	// components: {

	// },
	data() {
		return {
			userInfo: '', // 用户个人信息
			onlyImgShow: false, // 只有一张图片的时候触发，状态位true
			timeLimitImg: [], // 所有图片
			id: '', //  当前数据uuid
			initData: {}, // 初始化数据
			pathList: [] // 获取图片地址
		};
	},
	onLoad(option) {
		this.id = option.uuid;
		console.log(this.id,"活动的id")
	},
	onShow() {
		this.getTimeLimitData();
		this.onDownPathList(); // 获取带有二维码的图片
	},
	mounted() {},
	methods: {
		// 获取初始化数据
		getTimeLimitData() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					// console.log(res.data,"用户信息")
					that.userInfo = res.data;
				}
			});
			this.$apiGet(`/api/mission/public/missionDetail?uuid=${this.id}`, true, {}).then(data => {
				// console.log(data, '返回的数据'，this.id, 'id',);
				this.initData = data;
				if (data.img.length == 1) {
					this.timeLimitImg = data.img;
					this.onlyImgShow = true;
				} else {
					this.timeLimitImg = data.img.splice(0, 9);
				}
			});
		},

		// 复制文案
		copy(value) {
			let that = this;
			//提示模板
			uni.showModal({
				content: that.initData.content, //模板框中提示的内容
				confirmText: '复制文本',
				// showCancel: "true"
				success: res => {
					if (res.confirm) {
						//点击复制内容的后调函数
						//uni.setClipboardData方法就是将内容复制到粘贴板
						uni.setClipboardData({
							data: this.initData.content, //要被复制的内容
							success: res => {
								console.log(res, '保存');
								//复制成功的回调函数
								uni.showToast({
									//提示
									title: '复制成功',
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						uni.showToast({
							//提示
							title: '取消复制',
							icon: 'none'
						});
					}
				}
			});
		},
		// 图片的加载
		getImgList() {
			this.timeLimitImg.forEach((item, index) => {});
		},
		// 图片预览
		previewImage(index) {
			let imgList = []; // 预览的图片
			this.timeLimitImg.forEach(item => {
				imgList.push(this.$url(item));
			});
			uni.previewImage({
				current: index, //预览图片的下标
				urls: imgList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				loop: true
			});
		},
		// 复制文案分享
		onShareAppMessage: function(e) {
			// let title = '恭喜dog.东西获得成功'
			return {
				// title: this.initData.title,
				title: '和我一起推广得积分，积分兑换奖品', // 分享的标题名称
				path: `/pages/home/promotionDetails/timeLimitedPromotion?uuid=${this.id}`
			};
		},
		// 获取带有二维码地址的图片
		onDownPathList() {
			this.$apiGet(`/api/mission/public/getPathList?uuid=${this.id}`, false).then(data => {
				this.pathList = data;
				console.log(this.pathList);
				console.log(data, '获取带有二维码的图片');
			});
		},
		//  下载全部图片保存的操作开始
		onDown() {
			let that = this;
			let index = 0;
			// console.log('触发下载图片');
			// 第一步，先调用授权功能
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					// 1 授权成功遍历所有要下载的图片
					if (that.pathList && that.pathList.length > 0) {
						// console.log(that.pathList, '============查看有没有图片数据=============>');
						that.pathList.forEach(item => {
							// 1.1 调用下载api方法
							uni.downloadFile({
								url: that.$url(item), // 获取要下载的服务器里的图片地址
								success: res => {
									// 1.2 获取远程图片地址后,将图片地址缓存到本地
									if (res.statusCode === 200) {
										// console.log(res, '============下载后的图片地址=============>');
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath, // 把远程的图片地址及图片保存到本地
											success: function(res) {
												// 1.3保存成功后弹框提示保存成功
												uni.showToast({
													title: '保存成功',
													icon: 'none'
												});
											},
											fail: function(res) {
												// console.log(res, '============fail=============>');
												// 1.4保存失败给用户弹框提示
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												});
												if (res.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
													return;
												}
											}
										});
									}
								}
							});
						});
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
				},
				fail() {
					// 2、授权失败 弹框再次要求授权
					uni.showModal({
						title: '您需要授权相册权限',
						success(res) {
							// 2.1点击确认按钮就调取授权设置页面
							if (res.confirm) {
								// 2.2 开启授权设置页面
								uni.openSetting({
									success(res) {},
									fail(res) {}
								});
							}
						}
					});
				}
			});
		}
		// 下载全部图片保存的操作开始
	}
};
</script>

css样式 需要用scss编译如下：

<style lang="scss" scoped>
.TimeLimit_Box {
	width: 100%;
	height: 100%;
	padding: 22rpx 30rpx;
	padding-bottom: 120rpx;
	background-color: #fafafa;
	.TimeLimit_card {
		padding: 20rpx 20rpx 20rpx 36rpx;
		width: 690rpx;
		// height: 434rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(239, 239, 239, 0.5);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.title_view {
			font-weight: 600;
			font-size: 32rpx;
			margin-bottom: 40rpx;
			.TipsIcon {
				display: inline-block;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0rpx 10rpx;
				text-align: center;
				background-color: #de3f59;
				color: #ffffff;
				border-radius: 18rpx 18rpx 18rpx 0rpx;
				margin-left: 40rpx;
			}
		}
		.endTime_view {
			margin-bottom: 10rpx;
			.endTime_name {
				display: inline-block;
				font-size: 28rpx;
				color: #666666;
			}
			.endTime {
				display: inline-block;
				font-weight: 400;
				color: #333333;
			}
		}
		.task_Tips {
			display: flex;
			.Mission_statement {
				width: 140rpx;
				font-size: 28rpx;
				color: #666666;
			}
			.task_content {
				flex: 1;
				font-size: 28rpx;
				.task_content1 {
					text-align: justify;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.Wechat_Moments {
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(239, 239, 239, 0.5);
		border-radius: 8rpx;
		padding: 16rpx 20rpx;
		.preview_text {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.Preview_Area {
			display: flex;
			justify-content: space-between;
			.user_profile {
				width: 80rpx;
				margin-right: 20rpx;
				> image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
			}

			.Copywriting {
				width: 100%;
				.user_name {
					font-size: 28rpx;
					font-weight: 600;
				}
				.Copywriting_content {
					font-size: 28rpx;
					color: #999999;
					margin: 20rpx auto;
				}
				.Picture_grid {
					// height: 600rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					// align-items: flex-start | flex-end | center | baseline | stretch;
					align-items: center;
					> image {
						width: 176rpx;
						height: 176rpx;
						margin-bottom: 6rpx;
						margin-right: 6rpx;
					}
				}
				// 动态样式添加,当只有一张图片的时候
				.onlyImg {
					> image {
						width: 256rpx;
						height: 256rpx;
					}
				}
			}
		}
	}

	// 底部按钮
	.tail_button {
		position: fixed;
		width: 100%;
		// height: 128rpx;
		left: 0;
		bottom: 0rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.flot_bottom {
			display: flex;
			justify-content: center;
			margin: 10rpx auto;
			padding: 0 30rpx;
			background-color: #fff;
			.button_right {
				width: 300rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				margin-right: 40rpx;
				border: 2rpx solid #026bac;
				border-radius: 8rpx;
				.button_centent {
					color: #026bac;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
			.button_left {
				width: 300rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 8rpx;
				background-color: #026bac;
				.button_centent {
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}
}
</style>

注意： 如果遇到小程序预览时只有开启调试功能才能下载图片，说明你的服务器图片地址有误，要和后端人员确认下载接口的域名地址是否与下载图片的接口是否对应。