【微信小程序】保存多张图片到本地相册 uni.saveVideoToPhotosAlbum保存视频 uni.saveImageToPhotosAlbum保存图片

【微信小程序】保存多张图片到本地相册 uni.saveVideoToPhotosAlbum保存视频 uni.saveImageToPhotosAlbum保存图片_第1张图片

<template>
	<view class="container">
		<u-swiper :list="list" circular radius='0' indicator indicatorMode='dot' height='950rpx'></u-swiper>
	
	<view class="btn btn2" @click="saveFun">保存到相册</view>
	
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
			
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad(option) {},
		methods: {
			// 保存到相册 
			saveFun() {
				uni.showLoading({
					title: '图片下载中',
					mask: true
				})
			// 循环数组
				for (let i = 0; i < this.list.length; i++) {
					this.getTempPath(this.list[i],i)
				}
			},
			//此方法是单独下载每个图片,使用promise返回后通过 .then()方法继续下一个
			getTempPath(url,i) {
				let that = this;
				return new Promise((resolve, reject) => {
					wx.downloadFile({
						url: url,
						success: function(res) {
							var temp = res.tempFilePath
							wx.saveImageToPhotosAlbum({
								filePath: temp,
								success(res1) {
									 resolve(res1)
								},
								fail: function(err) {
									reject(url + JSON.stringify(err))
								}
							})
						},
						fail: function(err) {
							reject(url + JSON.stringify(err))
						}
					})
				})
			},
		


		},
	}
</script>

<style lang='scss' scoped>
	.fixedbox{
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #fff;
	}
	.tips {
		line-height: 34rpx;
		margin: 16rpx 24rpx 38rpx;
	}

	.btn {
		width: 376rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		color: #FFF;
	}

	.btn1 {
		background: #F37043;
	}

	.btn2 {
		background: $uni-color-main;
	}
</style>

方法二,保存多张图片

saveFun() {
	let videolength = this.list.length; // 要下载的总条数
	uni.showLoading({
		title: '图片下载中',
		mask: true
	});
	let that = this;
	let index = 0;
	for (let i = 0; i < this.list.length; i++) {
		uni.downloadFile({
			url: that.list[i],
			success: function(res) {
				var temp = res.tempFilePath
				uni.saveImageToPhotosAlbum({
					filePath: temp,
					success(res1) {
						index++;
						// 全部下载完后触发
						if (index == videolength) {
							uni.hideLoading()
							that.successFun();
						}
						
					},
				})
			}
		})
	}
},
// 全部下载完后触发调用
successFun() {
	console.log('全部下载完后触发调用')
}

你可能感兴趣的:(uniapp,小程序,微信小程序,小程序)