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>
相关推荐
小猪猪屁20 小时前
权限封装不是写个指令那么简单:一次真实项目的反思
前端·javascript·vue.js
hteng20 小时前
跨域 Iframe 嵌套:调整内部 Iframe 高度的终极指南 (以及无解的真相)
前端
Polaris_o20 小时前
轻松上手Bootstrap框架
前端
1024小神20 小时前
微信小程序前端扫码动画效果绿色光效移动,四角椭圆
前端
C_心欲无痕20 小时前
网络相关 - 强缓存与协商缓存讲解
前端·网络·网络协议·缓存
用户9047066835720 小时前
初来乍到公司,git不会用,怎么在团队里写代码?
前端
我的写法有点潮20 小时前
如何取消Vue Watch监听
前端·javascript·vue.js
童心虫鸣20 小时前
如何在Vue中传递函数作为Prop
前端·vue.js
用户66006766853920 小时前
用 React + TailwindCSS 打造高体验登录页面
前端·react.js
HashTang20 小时前
【AI 编程实战】第 6 篇:告别复制粘贴 - 设计一个优雅的 HTTP 模块
前端·uni-app·ai编程