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