uni-app 点击预览图片

uni-app 点击小图，放大预览，保存到手机相册

<template>
<view class="main-wrap">
    <view class="img-wrap">
        <image :src="handleClick.imageUrl" @click="TanPreviewImage(handleClick.imageUrl)" mode=""></image>
    </view>
</view>     
</template>

脚本代码：

methods:{
    TanPreviewImage(imageUrl){ 
        console.log(imageUrl) // http://192.168.100.251:8970/6_1597822634094.png
        var images = [];
        images.push(imageUrl);
        console.log(images)  // ["http://192.168.100.251:8970/6_1597822634094.png"]
        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
            current:0,
            urls:images,
            longPressActions: {  //长按保存图片到相册
                itemList: ['保存图片'],
                success: (data)=> {
                    console.log(data);
                    uni.saveImageToPhotosAlbum({ //保存图片到相册
                        filePath: payUrl,
                        success: function () {
                            uni.showToast({icon:'success',title:'保存成功'})
                        },
                        fail: (err) => {
                            uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
                        }
                    });
                },
                fail: (err)=> {
                    console.log(err.errMsg);
                }
        }
        });
    },
}

样式

<style lang="less">
.main-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .img-wrap{
        width: 100rpx;
        height: 100rpx;
        image{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    
}
</style>

作者：THERAIN_