#uni-app 开发项目实战#（附源码） 实现上传图片及预览功能

需求：实现图片上传及预览功能

知识点：v-for渲染、数组、api使用、flex布局

上传图片与预览的思路及步骤

一、上传图片

步骤：

（1）首先进行排版，排版出我们需要的放图片的位置 》》》》点击参考图片排版教程

<template>
		<!-- 上传图片板块 -->
		<button @click="chooseImg" >上传图片</button>
		<view class="choose" >
			<view class="photo" v-for="(item,index) in imgArr">
				<image :src="item" @click="preview(item)" ></image>
			</view>
		</view>
	</view>
</template>

（2）定义一个数组，待会接收我们上传的图片列表 

data() {
				return {	
					imgArr:[] // 拿到上传好的图片以后，进行渲染出来展示在页面上
				}
			}

（3）接着，我们知道想要完成上传图片这个动作，

就必定需要绑定一个事件来进行触发，
在这个案例里面，我们是设置了点击按键就可以上传图片，

所以我们需要在按键（button）上绑定 @click点击事件，然后在methods方法里面，

写上传图片的api ------uni.chooseImage +参数列表

<template>
		<!-- 上传图片板块 -->
		<button @click="chooseImg" >上传图片</button>
		<view class="choose" >
			<view class="photo" v-for="(item,index) in imgArr">
				<image :src="item" @click="preview(item)" ></image>
			</view>
		</view>
	</view>
</template>

	methods: {
				chooseImg() { //点击以后，就调用这个“上传图片”的api
					// console.log('上传图片')
					uni.chooseImage({
						count:15, //上传图片的张数
						success:res=> {
							console.log(res)
							this.imgArr = res.tempFilePaths 
                             //将上传的图片赋值给我们定义好的变量数组
						}
					})
				}
            }

（4）在方法里面将我们上传的图片赋值给定义好的变量数组

（5）效果展示

 

以上为上传图片的全部步骤及效果

二、预览图片的思路及步骤

等完成上传图片的全部步骤以后，我们开始做预览图片的部分

（1）想要预览每一张图片，

那我们就需要在图片（image）上进行绑定点击事件 @click="preview(item)

tips:
点击事件：

@click="preview(item)" ：

这个里面的item是指数组里面的某一条数据，

item.xx，就代表数组里面的这一条数据里面的具体某一个值（例如地址）

方法：

preview(current)：

代表我接收了来着preview(item)这个事件里面的item这些数据，然后再将它们显示出来

<template>
		<!-- 上传图片板块 -->
		<button @click="chooseImg" >上传图片</button>
		<view class="choose" >
			<view class="photo" v-for="(item,index) in imgArr">
				<image :src="item" @click="preview(item)" ></image>
			</view>
		</view>
	</view>
</template>

 （2）然后在方法里面，写预览图片的api：uni.previewImage(OBJECT)和参数 

methods: {	
 preview(current) {
	console.log(current);//点击每一张图片，打印出相应的图片路径
	uni.previewImage({
		current,//当前显示图片的链接/索引值
		urls:this.imgArr ,//需要预览的图片链接列表,imgArr里面保存着所有上传成功的图片地址
		indicator:Number,
          // 图片指示器样式，可取值："default" - 底部圆点指示器；
		//"number" - 顶部数字指示器； "none" - 不显示指示器。就是图片预览时，顶部的1/15 
		loop:true //是否可循环预览，默认值为 false
					})	
				}
			}

（3）平台差异：indicator、loop、longPressActions    这些参数仅在APP有效果

（4） 效果展示（在app里的效果）

 

 

 

 

 

 

 

源码展示：

<template>
	<view>
		<!-- 页面顶部导航栏 -->
		<view>
			<u-navbar title="修改登录密码" back-icon-name="nav-back" backText="返回" title-color="#25AFA2"
				back-icon-color="#25AFA2" :borderBottom="false"></u-navbar>
		</view>
		<!-- 导航栏与正文的分割线 -->
		<view class="line"> </view>
		<!-- 上传图片板块 -->
		<button @click="chooseImg">上传图片</button>
		<view class="choose">
			<view class="photo" v-for="(item,index) in imgArr">
				<image :src="item" @click="preview(item)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: [] // 拿到上传好的图片以后，进行渲染出来展示在页面上
			}
		},
		methods: {
			chooseImg() { //点击以后，就调用这个“上传图片”的api
				// console.log('上传图片')
				uni.chooseImage({
					count: 15, //上传图片的张数
					success: res => {
						console.log(res)
						this.imgArr = res.tempFilePaths //将上传的图片赋值给我们定义好的变量数组

					}
				})
			},
			preview(current) {
				console.log(current); //点击每一张图片，打印出相应的图片路径
				uni.previewImage({
					current, //当前显示图片的链接/索引值
					urls: this.imgArr, //需要预览的图片链接列表,imgArr里面保存着所有上传成功的图片地址
					indicator: Number,
					// 图片指示器样式，可取值："default" - 底部圆点指示器；
					//"number" - 顶部数字指示器； "none" - 不显示指示器。就是图片预览时，顶部的1/15 
					loop: true //是否可循环预览，默认值为 false
				})

			}

		},

		onReady() {

		}
	};
</script>

<style scoped lang="scss">
	.line {
		margin-top: 15rpx;
		width: 100%;
		height: 15rpx;
		background-color: #f1f1f1;

	}

	button {
		// margin-bottom: 100rpx;
	}

	.choose {
		width: 95%; //不要写死宽度
		display: flex; //使用弹性布局
		flex-wrap: wrap; //强制换行
		justify-content: space-between; //子盒子排列两端对齐
		margin: 20rpx auto; //居中对齐，距离顶部有20rpx
		text-decoration: none; //取消下划线

		.photo {
			width: 32%; //设置每一个子盒子的宽度，不要写死宽度
			height: 220rpx; //设置每一个子盒子的高度
			margin-bottom: 20rpx; //设置每个子盒子距离底部有20rpx
			background-color: #2979FF;

			image {
				width: 100%; //子盒子里面的图片高度
				height: 220rpx; //子盒子里面的图片宽度
			}
		}
	}

	.choose:after {
		// 使用伪类元素占据单位，不影响页面
		content: "";
		height: 0;
		width: 32%;
	}

	//解决末尾中间留白，使其靠左分布的方法：给父容器使用伪元素占位
</style>