uniApp 小程序保存图片到本地实现方案_uniapp 支付宝小程序 图片保存到相册

原文： https://mp.weixin.qq.com/s/hTqlpOdLncDE2m7mQaHVDA

背景

壁纸、头像类型小程序保存需要支持用户可以保存图片到本地。

实现流程

判断授权

uni.getSetting({
    success: function(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
             // 判断授权成功开始下载
            ...
        } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
            // 判断授权成功开始下载
            ...
        } else {
            // 判断授权失败，弹框提示用户授权
            ...
        }
    },
    fail: function(error) {
        // 失败错误信息输出
        console.log(error, 'getSetting')
    }
})
1

获取授权

uni.showModal({
    title: '提示',
    content: '需要授权保存相册',
    showCancel: true,
    success: function(resShow) {
        if (resShow.confirm) {
            // 弹出用户点击同意
            uni.openSetting({
                scope: 'scope.writePhotosAlbum',
                success: function(resOpen) {
                    // 授权成功开始下载
                },
                fail: function(errorOpen) {
                    // 授权失败输出错误信息
                    console.log(errorOpen, 'openSetting')
                }
            })
        } else {
            // 用户取消授权提示用户
            that.showToast('取消授权无法下载')
        }
    }
})
1

下载图片

uni.downloadFile({
    url: url,
    filePath: uni.env.USER_DATA_PATH + '/' + new Date().getTime() + '.jpg',
    success(res) {
        if (res.statusCode === 200) {
            // 下载成功开始保存图片
            ...
        }
    },
    fail(error) {
        // 下载失败输出错误信息
        console.log('下载失败', error)
    }
})
1

保存图片

uni.saveImageToPhotosAlbum({
    filePath: filePath,
    success: function() {
        console.log('保存成功')
    },
    fail: function(error) {
        console.log('保存失败', error)
    }
})
1

注： 上述流程只是简单描述图片保存到手机相册的流程，生产环境还有记录下载次数、弹出广告等流程。

G|Z|号回复 壁纸 即可获取全部源码，免费开源，可商用