uniapp保存图片到本地

uniapp保存图片到本地

uniapp官方文档

因为要做一个生成二维码并可以打印出来的功能，所以需要把做好的二维码显示出来并能保存到本地图库

在uniapp官方文档中是这样写的

uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: function (res) {
        uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePaths[0],
            success: function () {
                console.log('save success');
            }
        });
    }
});

我试过发现它调了手机的摄像头，然后就没有然后了。应该是我没使用对的原因。

翻看博客

<image @longpress="saveimg()" src="../../static/image/1.jpg"></image>
JS

下面保存的图片必须是http地址，我在这里是在百度找的，写死的两个地址，如果不管，在百度再找两个图片，先看下是不是你想要的效果，然后再改成后台返回的地址

saveimg() {
            uni.showActionSheet({
                itemList: ['保存到相册'],
                success: res => {
                    if (res.tapIndex == 0) {
                        uni.showLoading({
                            title: '保存中...'
                        });
                        setTimeout(function() {
                            uni.hideLoading();
                        }, 6000);
                        uni.downloadFile({
                            url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587813131574&di=ac74bcba69157e8026a7c78f194e9e4e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg', //网络路径，下载下来
                            success: res => {
                                if (res.statusCode === 200) {
                                    uni.saveImageToPhotosAlbum({
                                        filePath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587813131574&di=ac74bcba69157e8026a7c78f194e9e4e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg, //下载后的临时路径
                                        success: res => {
                                            //下载完成后在相册里压根找不到
                                            uni.hideLoading();
                                            uni.showToast({
                                                title: '保存成功！'
                                            });
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            });
        },

发现还真像他说的，下载完成后在相册压根找不到。具体是怎么回事我没有去深究，因为最近事情比较多。

成功的方法

//vue
<button type="primary" @click="handleDownImg" style="width: 100%;">下载图片</button>

//js
handleDownImg(){
    const that = this;
    uni.downloadFile({
        url:'网络路径',
        success: res => {
            if (res.statusCode === 200) {
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function() {
                        this.tools.toast('保存成功');
                    },
                    fail: function() {
                        this.tools.toast('保存失败，请稍后重试');
                    }
                });
            } else {
                this.tools.toast('下载失败');
            }
        }
    });
}

这样就实现了我们想要的结果。成功把图片保存下来了。