【使用uniapp完成微信小程序的图片下载到本机】

使用uniapp完成微信小程序的图片下载到本机

• • • 话不多说直接上代码吧

话不多说直接上代码吧

使用的vue3的语法糖进行完成的

因为我是请求的后端接口

<template>
	<view class="load">
		<view class="selectPart">
			<Select></Select>
		</view>
		<view class="PhotoPart">
			<image :src="image" mode=""></image>
		</view>
		<view class="btnPart">
			<button class="btnOne">
				<image src="../../static/images/mo.png" mode=""></image>
				<text>更像我</text>
			</button>
			<button class="btnTwo" @click="downloadPhoto">下载 ￥4.8</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch, computed, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import Select from '../components/select.vue'
	import { getCreatePhotoList } from '../../api/index.ts'

	// 图片ID
	const photoID = ref(null)
	
	// 图片
	const image = ref('')
	
	//获取上一个页面路由传递的参数
	onLoad((option) => {
		photoID.value = Number(option.photoID)
		getImageList()
	})

	// 获取生成的照片
	const getImageList = () => {
		const data = {
			id: photoID.value
		}
		getCreatePhotoList(data).then((res) => {
			image.value = res.data.items[0].file_path
		})
	}

	// 下载图片按钮
	const downloadPhoto = () => {
		uni.downloadFile({
			url: image.value,
			success(res) {
				if (res.statusCode === 200) {
					// 下载成功，保存到相册
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success() {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail() {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			},
			fail() {
				uni.showToast({
					title: '下载失败',
					icon: 'none'
				});
			}
		});
	};
</script>
//样式的话就不给大家啦，如果大家需要的话那就在评论区留言吧，随时恭候