微信小程序实现一键保存多张图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现一键保存多张图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

由于downloadFile一次只能下载一张图片，因此需要依次遍历图片数组，将图片逐一保存文章来源地址https://www.toymoban.com/news/detail-732458.html

// 一键保存所有图片
	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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

到了这里，关于微信小程序实现一键保存多张图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！