【使用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>
//样式的话就不给大家啦,如果大家需要的话那就在评论区留言吧,随时恭候
相关推荐
一渊之隔5 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
打不着的大喇叭6 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui6 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮9 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
racerun9 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui