uni-app微信小程序——上传图片和图片预览

一、实现功能

1、上传一张或多张图片(最多四张)

2、图片可点击预览放大

3、点击图片右上角可删除图片

二、实现方式

使用colorUI组件库,在微信小程序的全局样式中引入colorUI组件库的通用样式表main.css和icon.css

uni-app微信小程序——上传图片和图片预览_第1张图片

通用样式表下载地址https://download.csdn.net/download/weixin_40677985/11541901

或者colorUI组件库的官网下载https://www.color-ui.com/(官网有具体的使用文档)

三、代码的实现

注意:我用的是uni-app框架写的微信小程序,用原生的朋友请自行修改写法。

1、html的代码

		
			
				图片上传(选填)
			
			
				{{imgList.length}}/4
			
		
		
			
				
				 
					
						
					
				
				
					
				
			
		

2、js的代码

 

四、实现的效果 

uni-app微信小程序——上传图片和图片预览_第2张图片

 

uni-app微信小程序——上传图片和图片预览_第3张图片

 

uni-app微信小程序——上传图片和图片预览_第4张图片

 

uni-app微信小程序——上传图片和图片预览_第5张图片

你可能感兴趣的:(微信小程序)