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

文章来源:CSDN 发布日期:2024-05-08 分类:小程序博客 阅读( )

使用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>//样式的话就不给大家啦,如果大家需要的话那就在评论区留言吧,随时恭候

最新文章:

二维码