随手笔记--uniapp 、uview上传图片，浏览图片、删除图片

<view class="photograph">
	<u-form labelPosition="left" labelWidth="220">
		<u-form-item label="照片(最多9张)">
			<u-input v-model="dateType" :disabled="true" placeholder=" " />
			<u-icon class="right-icon" name="plus-circle" size="48" @click="choosePhoto()"></u-icon>
		</u-form-item>
	</u-form>
	<view class="column">
		<view class="moduleBox">
			<view class="flex-wrap">
				<view class="imgwrap" v-for="(image, index) in imageList">
				<!-- 删除小图标 -->
					<u-icon class="iconfont icon-guanbi1" name="close-circle-fill" size="36" @click="onDeleteClick(index)"></u-icon>
					<image :src="image" style="width: 180rpx;height: 180rpx;" @click="previewImage(image)">
					</image>
				</view>
			</view>
		</view>
	</view>
</view>

<script>
	export default {
		data() {
			return {
				imgArr: [], //存放图片数组
				imageList: [],
			};
		},
		methods: {
            //上传图片
			choosePhoto() {
				let _this = this;
				uni.chooseImage({
					count: 9, //最多可以选择的图片张数，默认9
					sourceType: ['camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success(res) {
						const len = _this.imageList.length
						if (len >= 9) {
							uni.showToast({
								icon: "none",
								title: '图片最多上传9张'
							})
						} else {
							for (let i = 0; i < 9 - len; i++) {
								if (res.tempFilePaths[i]) _this.imageList.push(res.tempFilePaths[i])
							}
						}
						console.log(JSON.stringify(res))
					},
					fail() {
						console.log('失败', err);
					},
					complete() {
						console.log('结束');
					},
				})
			},

			// 删除图片
			onDeleteClick(index) {
				// this.imageList.splice(index, 1)
				uni.showModal({
					title: '删除图片',
					content: '确定删除图片?',
					success: res => {
						if (res.confirm) {
							// 删除图片 将数据置空
							this.imageList.splice(index, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 预览图片
			previewImage(img) {
				// 新建一个存放预览图片的空数组
				var imgArr = []
				imgArr.push(img)
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					success: function(data) {},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			},
		},
	}
</script>

.photograph {
			margin: 0 20rpx;
			padding: 0 20rpx;
			flex: 1;
			background-color: #fff;
		}

		.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: 180rpx;
				height: 180rpx;
				margin: 10rpx 10rpx;

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