uniapp保存图片到相册demo效果(整理)

在这里插入图片描述

<template>
	<view class="demoPage">
		<view @click="saveImg">保存至相册</view>
	</view>
</template>
<script>
	export default {
    
    
		components: {
    
    },
		data() {
    
    
			return {
    
    
				url: 'http://img.touxiangwu.com/2020/3/uq6Bja.jpg',	//图片
			}
		},
		// 侦听器
		watch: {
    
    

		},
		// 计算属性
		computed: {
    
    

		},
		// 页面加载
		onLoad(e) {
    
    
		
		},
		// 页面显示
		onShow() {
    
    
			
		},
		// 方法
		methods: {
    
    
			saveImg() {
    
    
				let that = this;
				// 向用户发起授权请求
				uni.authorize({
    
    
					scope: 'scope.writePhotosAlbum',
					success: () => {
    
    
						// 已授权
						that.downImg();
					},
					fail: () => {
    
    
						// 拒绝授权,获取当前设置
						uni.getSetting({
    
    
							success: (result) => {
    
    
								if (!result.authSetting['scope.writePhotosAlbum']) {
    
    
									that.isAuth()
								}
							}
						});
					}
				})
			},
			//下载
			downImg() {
    
    
				uni.showLoading({
    
    
					title: '加载中'
				});
				uni.downloadFile({
    
    
					url: this.urlImg,
					success: (res) => {
    
    
						uni.hideLoading();
						if (res.statusCode === 200) {
    
    
							uni.saveImageToPhotosAlbum({
    
    
								filePath: that.url,	//图片地址url
								success: function() {
    
    
									uni.showToast({
    
    
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
    
    
									uni.showToast({
    
    
										title: "保存失败,请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
    
    
						uni.showToast({
    
    
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			/*
			 * 引导用户开启权限
			 */
			isAuth() {
    
    
				uni.showModal({
    
    
					content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
					success: (res) => {
    
    
						if (res.confirm) {
    
    
							uni.openSetting({
    
    
								success: (result) => {
    
    
									console.log(result);
								}
							});
						}
					}
				});
			},
		},
		// 页面隐藏
		onHide() {
    
    

		},
		// 页面卸载
		onUnload() {
    
    

		},
		// 触发下拉刷新
		onPullDownRefresh() {
    
    

		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
    
    

		},
	}
</script>

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/127237700
今日推荐