uniapp 上传图片、点击预览图片

1、在回调中打开本地相册

	uni.chooseImage({
		count:上传照片数量, //浏览器无法限制,默认上传数量为9
		success:res=> //回调参数包含上传的文件的信息，箭头函数绑定this，若还是报错,其实已经有数据了
		{
			res.tempFilePaths;  返回一个包含所有上传图片路径的数组
			res.tempFiles;  返回一个包含所有图片对象的数组
				path 	本地文件路径
				size 	本地文件大小，单位：B
				name 	包含扩展名的文件名称，仅H5支持
				type 	文件类型，仅H5支持
		}
		
	})
	
2、预览图片
	1、显示在页面上
		根据第一步可以获取到图片路径,在image标签中填入即可显示在页面上
		
	2、点击预览(若不是选择文字上传,只需要预览功能,写入url即可)
		在点击回调中设置
			uni.previewImage({
				current:当前点击文件路径/url路径,
				urls:所有文件路径的数组/url数组,
				
				以下为仅App有效的参数
				
				indicator 	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。 	
				loop 	是否可循环预览，默认值为 false 	
				
				longPressActions 长按图片显示操作菜单，如不填默认为保存相册 	
					配置信息
					itemList 	按钮的文字数组
					itemColor 	按钮的文字颜色，字符串格式，默认为"#000000"
					success 	接口调用成功的回调函数，详见返回参数说明
						回调参数:
						index 	用户长按图片的索引值
						tapIndex 用户点击按钮列表的索引值
				
			})

文档
预览文档

代码示例:

<template>
	<view>
		<view class='box'>
			<image v-for="(item,index) in imgArr" :src='item' :key="index" @click="set(item)"></image>
		</view>
		<text class='iconfont icon-shipin '></text>
		<text class='iconfont'>&#xe650;</text>
		<button type="primary" @click="get">按钮</button>
		<button type='primary' @click='set'>按钮2</button>
		<button type='primary' @click='remv'>按钮3</button>
	</view>
</template>

<script>
export default{
	data()
	{
		return{
			imgArr:['a']
		}
	},
	methods:{
		get()
		{
			uni.chooseImage({
				count:5, //浏览器无法限制,默认上传数量为9
				success:res=> //回调参数包含上传的文件的信息
				{
					console.log(res);
					this.imgArr=res.tempFilePaths;
					console.log(imgArr);
				}
				
			})
		},
		set(item)
		{
			uni.previewImage({
				current:item,
				urls:this.imgArr
				
			})
		},
		remv()
		{

		}
	},

}
</script>

<style scoped>
	@import url("../css/a.css");
	.box{
		height: 1000rpx;
		width: 375rpx;
		background-color: #4CD964;
	}
	.box1{
		background-color: #007AFF;
	}
</style>

单纯的图片预览:

<template>
	<view class='pics'>
		<scroll-view class='left' scroll-y >
			<view :class='number==index?active:""' v-for="(item,index) in tits" :key='index' @click="leftHandle(index)">{{item}}</view>
			
		</scroll-view>
		
		<scroll-view class='right' scroll-y>
			<view class='item' v-for="(item,index) in imgs[number]" :key="index"> 
				<image :src="item" @click="prew(index)"></image>
			</view>
			
			
		</scroll-view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tits:[
					'家居生活',
					'摄影设计',
					'明星美女',
					'空间设计',
					'户型装饰',
					'广告摄影',
					'摄影学习',
					'摄影器材',
					'明星写真',
					'清纯甜美',
					'古典美女'
				],
				number:0,
				active:'active',
				imgs:[
					["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg",
						"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg",
						"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg"
					],
					[
						"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1710399340,2209933578&fm=26&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=363114041,1907956863&fm=26&gp=0.jpg"
					],
					[
						"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2283990931,1987737174&fm=26&gp=0.jpg",
						"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2382876234,3146277274&fm=26&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3397184216,4041463360&fm=26&gp=0.jpg"
					]
				]
			}
		},
		methods: {
			leftHandle(index)
			{
				this.number=index;
			},
			prew(index)
			{
				uni.previewImage({
					current:this.imgs[this.number][index],
					urls:this.imgs[this.number]
				})
			}
		}
	}
</script>

<style lang='scss'>
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			width: 200rpx;
			height: 100%;
			border-right: solid 1px #eee;
			view{
				height: 120rpx;
				line-height: 120rpx;
				color: #333;
				text-align: center;
				border-bottom:  solid 1px #eee;
			}
			.active{
				background-color:#FF2A00;
				color: #FFF;
			}
		}
		.right{
			width: 530rpx;
			height: 100%;
			margin: 0 auto;
			.item{
				image{
					width: 530rpx;
					height: 530rpx;
					border-radius: 5px;
				}
			}
		}

	}
</style>