uni-app 多图上传示例

目录

• 效果图
• 组件
• 使用

效果图

组件

<template>
	<view class="container">
		<view class="image-content">
			<view class="list-item" v-for="(item,key) in Images">
				<image class="imgs" :src="item" @click="refundPicPreView(item)" />
				<image class="closePic" src="../static/close.png" @click="deleteImg(key)" />
			</view>

			<view class="list-item" @click="uploadImg">
				<image class="imgs" :src="defaultImg" />
			</view>
		</view>
		<view class="small">最多可以上传 {{Images.length}}/{{maxlenth}} 张图片</view>
	</view>
</template>

<script>
	import defaultImg from '../static/plus.png'
	export default {
		name: 'uploadImgs',
		props: {
			defaultImg: {
				type: String,
				default: defaultImg
			}
		},

		data() {
			return {
				Images: [],
				maxlenth: 6,
				isChoose: false
			}
		},
		methods: {
			uploadImg() {
				var that = this;
				if (that.Images.length >= that.maxlenth) {
					that.showToast("最多可以上传 " + that.maxlenth + " 张图片");
					return;
				}
				if (that.isChoose === true) {
					that.showToast("图片上传中...");
					return ;
				}
				that.isChoose = true;
				uni.chooseImage({
					count: that.maxlenth - that.Images.length, // 选择数量限制
					sizeType: ['original', 'compressed'], // 原图、压缩图
					sourceType: ['album', 'camera'], // 相册、拍照选择
					success: async (res) => {
						const tempFilePaths = res.tempFiles;
						uni.showLoading({
							title: '图片上传中...'
						});
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: that.$host + 'api/common/upload',
								filePath: tempFilePaths[i].path,
								name: 'file',
								header: {
									'Content-Type': 'multipart/form-data',
									'token': uni.getStorageSync('token')
								},
								success: function(res) {
									const Upres = JSON.parse(res.data)
									if (Upres.code == 1) {
										that.Images.push(Upres.data.fullurl);
									}
								},

							});
						}
						uni.hideLoading();
						setTimeout(() => {
							that.$emit('upload', {
								images: that.Images
							})
						}, 200)
					},
					complete () {
						that.isChoose = false;
					}
				})
			},
			//删除图片
			deleteImg(key) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除这张图片吗',
					success: (res) => {
						if (res.confirm) {
							that.Images.splice(key, 1);
							setTimeout(() => {
								that.$emit('upload', {
									images: that.Images
								})
							}, 200)
						}
					}
				})
			},
			// 预览图片
			refundPicPreView(currentImage) {
				uni.previewImage({
					current: currentImage,
					urls: this.Images
				})
			},
			// showToast 提示框
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					position: 'top'
				})
			}
		},
	}
</script>
<style>
	.container{
		border: 1px solid #EFEFEF;
		border-radius: 10rpx;
	}
	.list-item {
		position: relative;
		padding: 10rpx;
	}

	.imgs,
	.list-item {
		width: 147rpx;
		height: 147rpx;
	}

	.image-content {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.closePic {
		width: 34rpx;
		height: 34rpx;
		position: absolute;
		z-index: 99;
		top: 0;
		right: 0;
	}

	.small {
		font-size: 24rpx;
		color: rgb(0, 0, 0, 0.5);
		/* color: #EFEFEF; */
		text-align: right;
	}
</style>

使用

<template>
	<view class="container">
		<view class="new-list-item">
			<view class="title">
				图片：
			</view>
			<view>
				<uploadImgs @upload="upload"></uploadImgs>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImgs from '@/components/uploadImgs.vue'
	export default {
		components: {
			uploadImgs,
		},
		data() {
			return {
				isLoad: false,
				form: {
					images: '',
				},
			}
		},
		methods: {
			//获取子组件的图片url
			upload(e) {
				// console.log('e ==>',e);
				this.form.images = e.images.join(',');
			},
		},
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.new-list-item {
		margin: 20rpx 0;
		font-size: 34rpx;
		padding-bottom: 20rpx;
	}

	.title {
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 34rpx !important;
	}
</style>

---

仅作为使用记录