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>