uniapp realizes saving pictures to mobile phone album

A recently written requirement is to compress the image and upload it to the server to return the address of the watermarked image and also save the original image and the watermarked image in the mobile phone album. Here, first record and save the picture that returns the watermark in the background. If you have time, let’s talk about the front-end watermarking and uploading and saving it in the photo album.

Because after uploading a picture, calling the background update upload interface will return a watermarked picture address. 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 the interface A callback function that fails to be called to obtain permissions.

Above code:

<!-- 按钮触发事件 -->
<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 提示框
                    }
                })
            }
        })
    }
})