uniapp 之 图片保存在相册

<template>
	<view class="con">
		<view class="safeAreaBottom"></view>
		<view class="cont">
			<view class="text-center text-30">
				您的邀请码
			</view>
			<view class="fs-30" style="color: #FF1A1A;text-align: center;margin: 20rpx 0;">
				<text v-for="(item,index) in userInfo.invitationCode" :key="index"
					style="padding: 8rpx 14rpx;margin-right: 9rpx;background: #EFEFEF;">{{item}}</text>
			</view>
			<view style="font-size: 24rpx;color: #999;" class="text-center">邀请的好友也可在注册时直接填写邀请码</view>
			<view style="text-align: center;margin: 20rpx 0;">
				<image :src="qrPic" style="width: 316rpx;height: 316rpx;">
				</image>
			</view>
			<view>
				<view style="position: fixed;top: 78%;left: 92rpx;width: 562rpx;">
					<u-button text="立即邀请" openType="share" shape="circle" color="#FC7400"></u-button>
					<view style="margin-top: 30rpx;" class="btn" @tap="downloadImg">
						保存图片
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				qrPic: "",
			}
		},
		onLoad() {
			this.init();
		},
		onShareAppMessage(res) {
			let path = "/pages/login/register?Code="+uni.getStorageSync("userInfo").Code;
			return {
				path: path,
				title: '标题',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			init() {
				this.$http({
					url: '/api/userDetail',
					method: 'get',
				}).then(res => {
					this.userInfo = res.data;
					uni.setStorageSync("userInfo", res.data);
				});
				this.$http({
					url: '/api/invitationQrcode',
					method: 'get',
				}).then(res => {
					this.qrPic = res.data.qrPic;
				});
			},
			// 保存到本地
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.qrPic,
					success: () => {
						uni.$u.toast('保存成功');
					},
					fail: () => {
						uni.$u.toast('保存失败');
					},
				});
			},
			downloadImg() {
				uni.showLoading({
					title: '加载中...'
				});
				//wx.downloadFile方法：下载文件资源到本地
				uni.downloadFile({
					url: this.qrPic, //图片地址
					success: function(res) {
						console.log(111, res);
						//wx.saveImageToPhotosAlbum方法：保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //图片文件路径
							success: function(data) {
								uni.hideLoading(); //隐藏 loading 提示框
								uni.showModal({
									title: '提示',
									content: '保存成功',
									modalType: false,
								})
							},
							// 接口调用失败的回调函数
							fail: function(err) {
								if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err
									.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err
									.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
								) {
									uni.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										modalType: false,
										success: modalSuccess => {
											uni.openSetting({
												success(settingdata) {
													console.log("settingdata",
														settingdata)
													if (settingdata
														.authSetting[
															'scope.writePhotosAlbum'
														]) {
														uni.showModal({
															title: '提示',
															content: '获取权限成功,再次点击图片即可保存',
															modalType: false,
														})
													} else {
														uni.showModal({
															title: '提示',
															content: '获取权限失败，将无法保存到相册哦~',
															modalType: false,
														})
													}
												},
												fail(failData) {
													console.log("failData",
														failData)
												},
												complete(finishData) {
													console.log("finishData",
														finishData)
												}
											})
										}
									})
								}
							},
							complete(res) {
								uni.hideLoading(); //隐藏 loading 提示框
							}
						})
					}
				})
			},
			saveEwm() {
				//获取相册授权
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									//这里是用户同意授权后的回调
									this.save();
								},
								fail: () => { //这里是用户拒绝授权后的回调
								}
							})
						} else { //用户已经授权过了
							this.save();
						}
					}

				})

			},
		},
	}
</script>

<style scoped>
	.con {
		min-height: 100vh;
		background: url('https://mtyfl.oss-cn-shanghai.aliyuncs.com/share_fried.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.cont {
		position: absolute;
		width: 636rpx;
		height: 684rpx;
		left: 57rpx;
		top: 34%;
	}

	.btn {
		width: 562rpx;
		height: 70rpx;
		border-radius: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #FFFFFF;
		color: #fff;
		font-size: 28rpx;
	}
</style>