uni-app通过uni.previewImage实现在线预览图片

1 篇文章 0 订阅
1 篇文章 0 订阅

问题还原:

在项目开发中,用户上传完图片后,在展示区域想要预览图片,所以需要实现图片的在线预览功能。那么如何实现那?

解决方案:

**使用uni-app自带的uni.previewImage({current: 0, urls: url})即可实现图片的在线预览功能。**需要注意的是其中urls是图片路径数组。具体代码如下所示:
界面代码如下所示:

<text class="value"><a @tap="imgView(item.imgName, item.imgPath)" style="color: blue;">{{item.imgName}}</a></text> 

JS代码如下所示:

methods: {
			//图片预览
			imgView(imgName, imgPath) {
				if(imgName &&imgPath) {
					const imgTypeArr = ["bmp","jpg","png","tif","gif","pcx","tga","exif","fpx","svg","psd","cdr","pcd","dxf","ufo","eps","ai","raw","WMF","webp","avif","apng"];
					const lastIndex = imgName.lastIndexOf(".");
					const imgType = imgName.substring(lastIndex + 1, imgName.length);
					if(imgTypeArr.includes(imgType)) {
						var imgPaths = [];
						imgPaths.push(imgPath);//注:这里是图片的全路径,直接浏览器访问可以展示的那种。
						uni.previewImage({
							current: 0,
							urls: imgPaths,//图片路径是个数组,数组里面放图片的全路径
							longPressActions: {  //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data)=> {
									uni.saveImageToPhotosAlbum({ //保存图片到相册
										filePath: payUrl,
										success: function () {
											uni.showToast({icon:'success',title:'保存成功'})
										},
										fail: (err) => {
											uni.showToast({icon:'none',title:'保存失败,请重新尝试'})
										}
									});
								},
								fail: (err)=> {
									console.log(err.errMsg);
								}
						}
						})
					}else {
						uni.showToast({
							icon: 'none',
							title: '只能预览图片!'
						});
					}
				}
			}
		}

注:笔者在代码中判断了下文件格式是不是图片。

PS:欢迎大家点赞、关注、支持。如有需要,欢迎添加博主QQ沟通交流!QQ:156587607

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值