uniapp图片保存到相册用的uni.downloadFile下载资源和uni.saveImageToPhotosAlbum保存到相册来做的
<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>