uniapp图片上传组件

<!--子组件-->
<template>
	<view>
		<view class="content">
			<view class="imageBigBox" v-for="(item,i) in imageList" :key="i">
				<image style="width: 100%;height: 160rpx;" @click="previewImg(item)" :src="item"></image>
				<u-icon class="delIcon" name="close-circle" color="#999" size="25" @click="delectImg(i)"></u-icon>
			</view>
			<view class="flex-center upImg" v-if="imageList.length<maxCount" @click="chooseFile">
				<u-icon name="camera-fill" color="#c1c1c1" size="30"></u-icon>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		name: "rc-upload-img",
		props: {
			//上传图片最大数量
			maxCount: {
				type: Number,
				default: 1
			},
			
		},
		data() {
			return {
				BASE_URL: getApp().globalData.BASE_URL,//请求服务器域名如: https://www.XXX.com
				imageList: [],//本地上传图片数组
				list: [],//上传后端后返回的图片链接数组
			};
		},
		methods: {
			//上传图片
			async chooseFile() {
				uni.chooseImage({
					count: this.maxCount - this.imageList.length,//图片大于1可以多选,这样可以不超出最大上传值
					sourceType: ['album'],
					success: (res) => {
						this.list=[]
						res.tempFilePaths.forEach(item => {
							this.imageList.push(item)
						})
						this.imageList.forEach(item => {
							this.upImg(item)
						})
						// console.log(res, "res", this.imageList)
					}
				});
			},
			//图片数据上传后端
			upImg(path) {
				uni.uploadFile({
					url: `${this.BASE_URL}/api/common/upload`,
					filePath: path,
					name: 'file',
					success: (res) => {
						const data=eval('('+res.data+')')
						if(data.code==1){
							this.list.push(data.data.url)
							this.$emit('list', this.list);	//通知父组件有图片更新
						}
						// console.log('上传:', this.list,data, );
					}
				});
			},
			//删除图片
			delectImg(i) {
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(i, 1)
							   this.list.splice(i,1)
							this.$emit('list', this.list);	//通知父组件删除了数据
						}
					}
				})
			},
			//点击预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.imageList,//存放图片的数组
					loop: true,
					indicator: "default"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upImg {
		width: 100%;
		height: 160rpx;
		background: #f4f5f7;
	}

	.content {
		margin-right: 10rpx;
		display: grid;
		grid-template-columns: repeat(4, 24%);
		grid-gap: 20rpx;
	}

	.imageBigBox {
		position: relative;


	}

	.delIcon {
		position: absolute;
		right: 0;
		top: -16rpx;

	}
</style>

<!--父组件使用: 如果组件是遵循uniapp 组件开发命名的,pages.json里面配置了可以直接使用,不是的话要将组件引入使用页面-->

	<rc-upload-img :maxCount="1" @list="getImgList"></rc-upload-img>
		<script>
		data(){
		return{
		photoList :[]
		}},
		methods: {
		getImgList(e) {
				this.photoList = e
			},
		}
		</script>