uniapp封装上传图片组件

 组件代码，直接在需要的地方引入即可，只需更改data中的地址为自己的服务器地址

<template>
	<view>
		<view class="qtpicker">
			<!-- 选中待上传的图片 -->
			<view class="preImgs" v-for="(val,index) in preImgUrl" :key='index'>
				<image mode="" :src="val" @click="showImg(val,index)">
				</image>
				<!-- 删除某张图片 -->
				<view class="cuo" @click="delImg(index)">×</view>
			</view>

			<!-- 添加图片的按钮 -->
			<view class="addImg" @click="chooseImg">
				<view>+</view>
				<view>添加图片</view>
			</view>

		</view>

		<!-- 确定上传到服务器 -->
		<button type="primary" @click="submitImg">确定上传</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				preImgUrl: [], //本地预览的图片数据
				imgNum: 0, //一共选中了多少张照片,用来限制本次最大上传数量
				serverUrl: 'http://www.baidu.com', //要上传的图片的服务器地址
			}
		},
		methods: {

			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					// count:  允许上传的照片数量
					count: 2, //h5无法限制
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: "original，compressed",
					success: function(res) { //选择成功，将图片存入本地临时路径，可删除，可查看，等待上传
						console.log(res, '选择成功')

						// 如果限制图片大小，则添加判断
						res.tempFiles.map(val => {

							// 判断本次上传限制的图片大小
							if (val.size > 10485760) {
								uni.showToast({
									icon: 'none',
									title: '上传的图片大小不超过10M'
								})
								return
							}

							// 判断本次最多上传多少照片
							that.imgNum++
							if (that.imgNum > 9) {
								that.imgNum = 9
								uni.showToast({
									icon: 'none',
									title: '上传的图片最多不能超过9张'
								})
								return
							}

							that.preImgUrl.push(val.path) //把临时路径添加进数组，渲染到页面
						})
					}
				})
			},

			//点击小图查看大图片
			showImg(val, index) {
				console.log(val, '点击了')
				let that = this
				uni.previewImage({
					// 对选中的图片进行预览
					urls: that.preImgUrl, //图片数组  // urls:['','']  图片的地址 是数组形式
					current: index, //当前图片的下标
				})
			},

			//删除某张图片，从本地的临时路径图片中, 删除路径即可
			delImg(index) {
				this.preImgUrl.splice(index, 1)
			},

			// 确定上传图片，传到服务器
			submitImg() {
				let that = this

				// 如果没有选择图片则
				if (that.preImgUrl.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先选择图片'
					})
					return
				}

				// 遍历要上传的图片临时地址，进行上传
				that.preImgUrl.map(val => {
					uni.uploadFile({
						url: that.serverUrl, //服务器地址
						filePath: val, //存在本地要上传的临时图片地址
						name: 'image', //名字可以随便写
						header: {
							"Content-Type": "multipart/form-data"
						},
						success(res) { //上传成功的回调函数
							console.log(res, '上传成功')
							uni.showToast({
								icon: 'none',
								title: '上传成功'
							})
						},
						fail(res) {
							console.log(res, '上传失败')
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							})
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.qtpicker {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
		padding: 10rpx 0;

		.preImgs {
			margin: 13rpx;
			position: relative;

			image {
				width: 125rpx;
				height: 125rpx;
			}

			.cuo {
				width: 35rpx;
				height: 35rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 30rpx;
				border-radius: 50%;
				background-color: #ff0000;
				color: #FFFFFF;
				position: absolute;
				right: -17.5rpx;
				top: -17.5rpx;
			}
		}


		.addImg {
			width: 125rpx;
			height: 125rpx;
			border: 2rpx solid #d4d4d4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			// background-color: #ebebeb;
			margin: 13rpx;
		}
	}
</style>

父引入

<template>
	<view class="box">
			<picker-img></picker-img>    <!-- 图片上传组件 -->
	</view>
</template>

<script>
	import pickerImg from './components/pickerImg/pickerImg.vue'
	export default {
		components: {pickerImg},
	}
</script>

<style scoped lang="scss">
</style>