uniapp实现点击图片预览放大,长按下载图片

  1. 使用uniapp中的 uni.previewImage API 预览图片

  2. 使用uniapp中的 uni.downloadFile API 下载图片

  3. 使用uniapp中的 uni.saveImageToPhotosAlbum API 将图片保存到相册

javascript 复制代码
<template>
	<view class="content" style="padding-top: 40px;">
		<image @click="previewImage" style="width: 200px; height: 200px; background-color: #eeeeee;" src="http://**.com/images/app/kefuerweima.png"></image>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				
			}
			
		},
		
		methods: {
			
			previewImage(e) {
				var current = e.target.dataset.src
				let that = this
				uni.previewImage({
					// showmenu:true,
					current: current,
					urls: ['http://**/images/app/kefuerweima.png'],
					longPressActions :{
						itemList:['保存图片'],
						success(data) {
							let imgurl = 'http://**/images/app/kefuerweima.png'
							that.saveImage(imgurl)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					
				})
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
							    })
							}
						})
					}
				})
			},
		}
	}
</script>
相关推荐
IT_陈寒5 小时前
Java性能调优的7个被低估的技巧:从代码到JVM全链路优化
前端·人工智能·后端
掘金安东尼5 小时前
前端周刊第439期(2025年11月3日–11月9日)
前端·javascript·vue.js
码农刚子5 小时前
ASP.NET Core Blazor进阶1:高级组件开发
前端·前端框架
道可到6 小时前
重新审视 JavaScript 中的异步循环
前端
起这个名字6 小时前
微前端应用通信使用和原理
前端·javascript·vue.js
QuantumLeap丶6 小时前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
CSharp精选营6 小时前
ASP.NET Core Blazor进阶1:高级组件开发
前端·.net core·blazor
用户9714171814276 小时前
uniapp页面路由
vue.js·uni-app
Kingsaj6 小时前
uni-app打包app -- 在用户首次启动 App 时,强制弹出一个“用户协议与隐私政策”的确认对话框。
服务器·ubuntu·uni-app
Vue10246 小时前
uniapp 使用renderjs 封装 video-player 视频播放器, html5视频播放器-解决视频层级、覆盖、播放卡顿
uni-app·音视频·html5