Wechat applet realizes saving pictures to mobile phone album

Implementation idea:

First of all, we need to call the wx.downloadFile method to download the file resource to the local, and then use the wx.saveImageToPhotosAlbum method to save the picture to the system album. It should be noted that this writing may cause the picture to be unable to be downloaded due to lack of permission, so we finally need to give Interface a callback function that fails to call to obtain permissions, and finally this small function is realized.

The source code is as follows:

<!-- 按钮触发事件 -->
<button bindtap="downloadImg">点击下载图片</button>

const app = getApp(); //获取app实例
Page({
    data: {
        modalType: false, //弹框默认不显示
        imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片
    },
    // 点击下载图片事件
    downloadImg() {
        wx.showLoading({
            title: '加载中...'
        });
        //wx.downloadFile方法：下载文件资源到本地
        wx.downloadFile({
            url: this.data.imgUrl, //图片地址
            success: function (res) {
                //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //图片文件路径
                    success: function (data) {
                        wx.hideLoading(); //隐藏 loading 提示框
                        wx.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") {
                            wx.showModal({
                                title: '提示',
                                content: '需要您授权保存相册',
                                modalType: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            console.log("settingdata", settingdata)
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功,再次点击图片即可保存',
                                                    modalType: false,
                                                })
                                            } else {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，将无法保存到相册哦~',
                                                    modalType: false,
                                                })
                                            }
                                        },
                                        fail(failData) {
                                            console.log("failData", failData)
                                        },
                                        complete(finishData) {
                                            console.log("finishData", finishData)
                                        }
                                    })
                                }
                            })
                        }
                    },
                    complete(res) {
                        wx.hideLoading(); //隐藏 loading 提示框
                    }
                })
            }
        })
    }
})