微信小程序实现一键保存多张图片

实现功能：点击‘保存图片’可以将商品的所有图片以及商品的海报图片保存到相册中

由于downloadFile一次只能下载一张图片，因此需要依次遍历图片数组，将图片逐一保存

// 一键保存所有图片
	oneSaveImg() {
		// 首先判断用户是否登录
		if (this.$isLogin()) {
			uni.showLoading({
				title:"保存中"
			})
			//遍历接口返回值 将返回值push到数组中
			for(let i = 0; i < this.goodsInfo.gallery_list.length;i++){ 
				//防止用户多次点击，判断原数组中是否存在图片，不存在则push
				if(this.shopArr.length>=this.goodsInfo.gallery_list.length) break;
				this.shopArr.push(this.goodsInfo.gallery_list[i].img_url)
			}
			let price = this.goodsInfo.goods_price || this.goodsInfo.shop_price
			this.$store.dispatch('setGoodsShare', { //请求接口 获取海报图片
				goods_id: this.goods_id,
				price: price,
				share_type: this.goodsInfo.is_distribution,
				platform: uni.getStorageSync('platform'),
				shop_id: uni.getStorageSync('shop_id')
			}).then(res => {
				if (res.status == 'success') {
					this.shareImg = res.data,
					this.shopArr.push(this.shareImg)
					let url = res.data
					// 将数组中的图片链接遍历 依次下载
					for(let i=0;i<this.shopArr.length;i++){
						uni.downloadFile({
							url:this.shopArr[i],
							success: res => {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										uni.hideLoading()
										if(i == this.shopArr.length-1){
											uni.hideLoading()
											uni.showToast({
												title:"图片保存成功"
											})
											this.shopArr = []
										}
									},
									fail: res => {
										if (res.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || res.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
											uni.showModal({
												title: '提示',
												content: '需要您授权保存相册',
												showCancel: false,
												success: modalSuccess => {
													uni.openSetting({
									        			success: settingdata => {
														console.log('settingdata', settingdata);
															if (settingdata.authSetting['scope.writePhotosAlbum']) {
																uni.showModal({
																	title: '提示',
																	content: '获取权限成功,再次点击图片即可保存',
																	showCancel: false
																});
															}else{
																uni.showModal({
																    title: '提示',
																    content: '获取权限失败，将无法保存到相册哦~',
																    showCancel: false,
																})
															}
														},
														fail:failData=>{
															uni.showToast({
																title: '保存失败！',
																icon: 'none'
															});
														console.log("授权失败",failData)
														},
													});
												}
											});
										}
									}
								});
							},fail:res=>{
								console.log(res)
							}
						});
					}
				}
			})
		} else {
			uni.showModal({
				content: "您需要登录会员!",
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login?delta=1'
						})
					}
				}
			})
		}
	},

作者：Reve2333
链接：https://juejin.cn/post/6844904122869612557
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。