uniapp开发微信小程序 之 保存图片到本地

在 UniApp 开发微信小程序时，若要将图片保存到本地，可按以下步骤操作：

1. 获取用户授权

在保存图片前，要先获取用户的授权，允许小程序访问相册。示例代码如下：

// 检查授权状态
uni.getSetting({
    success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
            // 未授权，请求授权
            uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                    // 授权成功，可进行保存图片操作
                    saveImageToAlbum();
                },
                fail: () => {
                    // 授权失败，提示用户手动授权
                    uni.showModal({
                        title: '提示',
                        content: '请在设置中开启相册权限',
                        success: (modalRes) => {
                            if (modalRes.confirm) {
                                uni.openSetting();
                            }
                        }
                    });
                }
            });
        } else {
            // 已授权，直接保存图片
            saveImageToAlbum();
        }
    }
});

2. 保存图片到相册

当获取到用户授权后，就可以使用 uni.saveImageToPhotosAlbum 方法将图片保存到相册。此方法既支持本地图片路径，也支持网络图片路径。

保存本地图片

function saveImageToAlbum() {
    // 本地图片路径，例如通过 uni.downloadFile 下载后的本地临时路径
    const localImagePath = '本地图片路径'; 
    uni.saveImageToPhotosAlbum({
        filePath: localImagePath,
        success: () => {
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            });
        },
        fail: (err) => {
            uni.showToast({
                title: '保存失败',
                icon: 'none'
            });
            console.log('保存失败原因:', err);
        }
    });
}

保存网络图片

若要保存网络图片，需先使用 uni.downloadFile 方法将网络图片下载到本地，再将下载后的本地临时路径用于保存操作。

function saveImageToAlbum() {
    const imageUrl = '网络图片的 URL';
    uni.downloadFile({
        url: imageUrl,
        success: (downloadRes) => {
            if (downloadRes.statusCode === 200) {
                const localImagePath = downloadRes.tempFilePath;
                uni.saveImageToPhotosAlbum({
                    filePath: localImagePath,
                    success: () => {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success'
                        });
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none'
                        });
                        console.log('保存失败原因:', err);
                    }
                });
            } else {
                uni.showToast({
                    title: '下载图片失败',
                    icon: 'none'
                });
            }
        },
        fail: (err) => {
            uni.showToast({
                title: '下载图片失败',
                icon: 'none'
            });
            console.log('下载图片失败原因:', err);
        }
    });
}