uniapp,图片上传和图片预览

效果如图

直接看代码

<template>
	<view>
		<button type="primary" @click="chooseImage">上传图片</button>
		<view class="imgBox" v-for="(item,index) in imgArr" :key="index">
			<image :src="item" @click="previewImage(index)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[]
			}
		},
		methods: {
			//选择图片
			chooseImage(){
				uni.chooseImage({
					//count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
					count: 6,//最多可以选择的图片张数，默认9
					success:res=>{//成功则返回图片的本地文件路径列表 tempFilePaths
						this.imgArr = res.tempFilePaths
					}
				})
			},
			
			//预览图片
			previewImage(num){
				uni.previewImage({
					current: num,//为当前显示图片的链接/索引值,App平台在 1.9.5至1.9.8之间，current为必填。不填会报错
					urls: this.imgArr,//必填
					success: res=>{
						console.log(num);
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.imgBox{
		display: inline-block;
		margin:30rpx;
		border: #00ffff 2rpx solid;
		border-radius: 10rpx;
		padding: 10rpx;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>

官方文档
https://uniapp.dcloud.io/api/media/image.html