uniapp上传图片及删除功能(附代码，拿来就用)

<template>
	<view class="column">
		<view class="moduleBox">
			<view class="title">商品图片</view>
			<view class="font22" style="margin: 30upx 0;color: #999;">上传图片大小不允许超过2M!</view>
			<view class="flex-wrap">
				<view class="imgwrap" v-for="(item, index) in upImgGroup">
					<!-- 删除小图标 -->
					<view class="iconfont icon-guanbi1" @click="closeImg(index)"></view>
					<image :src="item" style="width: 100%;height: 100%;"></image>
				</view>
				<!-- 自己找个图片吧 -->
				<image src="../../static/upimg.png" style="width: 120upx;height: auto;" mode="widthFix"
					@click="upimage"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upImgGroup: [], //上传图片集合
			};
		},
		methods: {
			// 上传图片
			upimage() {
				var _that = this;
				uni.chooseImage({
					count: 9, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							_that.upImgGroup.push(res.tempFilePaths[i])
						}
						_that.orderKey = _that.orderKey + 1;
						var tempFilePaths = res.tempFilePaths;
						var tempFilesSize = res.tempFiles[0].size; //获取图片的大小，单位B
						if (tempFilesSize >= 2 * 1024 * 1024) {
							this.$api.msg("上传图片大小不允许超过2M!");
							return;
						}
					}
				});
			},
			// 删除图片
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前图片',
					success: function(res) {
						if (res.confirm) {
							that.upImgGroup.splice(index, 1);
							let id = that.upImgList[index].consignmentGoodsImgId;
							that.deleteImgTwo(id);
							that.upImgList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss">
	.moduleBox {
		width: 100%;
		background-color: #fff;
		padding: 30upx;
		margin-bottom: 20upx;
		font-size: 26upx;

		.title {
			font-weight: 600;
			font-size: 30upx;
		}

		.flex-wrap {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.imgwrap {
			position: relative;
			width: 120upx;
			height: 120upx;
			margin-right: 18upx;
			margin-bottom: 20upx;

			.iconfont {
				color: #eee;
				position: absolute;
				top: -10upx;
				right: -10upx;
				z-index: 1;
			}
		}
	}
</style>