uniapp 电商app 实现长按图片保存到本地相册功能

保存图片到本地相册uni.saveImageToPhotoAlbum

最近app需要一个保存图片到本地的功能，通过uniapp官网，可以查看到有一个方法：
uniapp 保存图片到本地相册
uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。
官方给出的示例代码如下：

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

这段代码实现的功能是：打开相机拍摄一张图片后保存到本地相册。
uni.chooseImage其中，sourceType有两种类型，一种是camera相机，一种是album相册。
但是跟我要求的不太一样，我一开始的反应就是直接使用uni.saveImageToPhotoAlbum这个api就行。
结果：真机运行没有问题，但是云打包后一直提示保存失败。

云打包后保存图片到本地失败

从网上百度得到的结果就是：我使用的是本地图片，也就是相对路径的存储方式，而uni.saveImageToPhotoAlbum这个api支持的是网络图片。
于是我又开始从uniapp官网上查找，找到了一个插件可以实现 图片预览 图片隐藏 图片下载的功能。

uniapp 插件市场——保存图片插件

插件的使用方法很简单：

功能介绍
1.长按保存图片
2.右下角图片点击保存图片 
3.点击图片可以隐藏图片

使用教程
1.插件代码拷贝
下载后把components目录下saveFile.vue文件拷贝到自己项目目录下
2.插件全局配置

在项目里main.js中配置如下代码
import savefile from './components/saveFile.vue'

Vue.component('savefile',savefile)
3.插件使用
vue页面使用
<template>
    <view>
        <!-- 预览图片 -->
        <savefile v-if="isShowPhoto" :url="qrUrl" @hide="hidePhoto"></savefile>
    </view>
</template>
export default {
    data() {
        return {
            qrUrl:'/static/img/img1.jpg',
            isShowPhoto:true,
        };
    },
    onLoad() {},
    methods: {
        hidePhoto(){
            this.isShowPhoto = false;
            uni.showToast({
                title:'图片已隐藏',
                icon:'none'
            })
        }
    }
};
兼容性
uni-app项目中使用都兼容 除了H5

我不需要预览图片这个功能，我要实现的是点击图片或长按图片就可以实现保存，所以针对插件做了一下改动。

<!-- 
<savefile  :url="payInfo.qrUrl" @hide="hidePhoto"></savefile>
url：是否显示图片
 //隐藏预览图片
 hidePhoto(){
 	this.isShowPhoto=false;
 },
 
 -->
<template>
	<!-- 预览图片 -->
	<view class="preview-photo-box flex-box">
		<!-- <view class="preview-photo-bg" @tap="hide"></view> -->
		<view class="item tc">
			<image class="receive-qrcode-img" :src="url" mode="widthFix" @tap="save" @longtap="toSave"></image>
		</view>
	<!-- 	<view class="download-img" @tap="save">
			<image
				src="https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/DPC/icon/download.png"
			></image>
		</view> -->
	</view>
</template>


<script>
export default {
	props: {
		url: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		hide() {
			this.$emit('hide');
		},
		save() {
			// #ifdef APP-PLUS
			uni.getImageInfo({
				src: this.url,
				success: function(image) {
					console.log('图片信息：', JSON.stringify(image));
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '图片保存成功',
								icon: 'none',
								duration: 2200
							});
						}
					});
				}
			});
		// #endif
		},
		toSave() {
			uni.showModal({
				title: '图片保存',
				content: '确定要保存图片吗',
				success: e => {
					if (e['confirm']) {
						this.save();
					}
				}
			});
		}
	},
	created() {}
};
</script>

<style lang="scss">
// .preview-photo-box {
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	width: 100%;
// 	height: 100%;
// 	z-index: 99;
// 	justify-content: center;
// 	align-items: center;
// 	.item {
// 		flex: 1 0 auto;
// 		.receive-qrcode-img {
// 			position: relative;
// 			z-index: 2;
// 			width: 100%;
// 		}
// 	}
// 	.download-img {
// 		position: absolute;
// 		bottom: 30upx;
// 		right: 30upx;
// 		z-index: 100;
// 		background: rgba(255,255,255,0.5);
// 		font-size: 0;
// 		image {
// 			width: 64upx;
// 			height: 64upx;
// 		}
// 	}
// 	.preview-photo-bg {
// 		position: absolute;
// 		left: 0;
// 		top: 0;
// 		z-index: 0;
// 		width: 100%;
// 		height: 100%;
// 		background: rgba(0, 0, 0, 0.5);
// 	}
// }
</style>