uni-app上传图片

文章为个人学习vue项目中的笔记，好记性不如烂笔头，方便日后查看，如有疏漏请见谅！

html部分

<template>
	<view id="app">
		<view class="img-list">
			<image v-for="item in imgList" :src="item" mode=""></image>
			<!-- 点击上传图片 -->
			<view class="pictures" @click="chooseImg">
				+
			</view>
		</view>
	</view>
</template>

javascript部分

<script>
	export default {
		data() {
			return {
				imgList: []
			}
		},
		methods: {
			chooseImg() {
				console.log('上传图片'),
					uni.chooseImage({ //上传图片的内置方法
						count: 5, //在h5浏览器限制不住
						success: res => {
							console.log(res.tempFilePaths)
							//返回的图片路径将它push到imgList中
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.imgList.push(res.tempFilePaths[i])
							}
							console.log(this.imgList)
						}
					})
			}
		}
	}
</script>

css部分

<style>
	view {
		box-sizing: border-box;
	}

	.pictures {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 110px;
		height: 110px;
		padding: 10px 10px;
		border: 1px solid #333;
		font-size: 50px;
		color: #999;
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 20px;
	}

	.img-list image {
		width: 100px;
		height: 100px;
		/* border: 1px solid #333333; */
		padding: 10px 10px;
	}
</style>