uniapp 微信小程序使用腾讯云存储cos上传图片组件二次封装，实现图片上传，此组件是基于腾讯云存储cos上传，使用前，需要安装对应的组件和依赖。uniapp 微信小程序使用腾讯云对象存储cos 文档地址

<template>
	<div class="uploadimg">
		<div class="imageItem" :class="{mr0:maxCount==1}" v-for="(item,index) in imgList" :key="index">
			<u--image radius="10" :showLoading="true" :src="item" width="140rpx" height="140rpx"
				@click="previewImg(imgList,index)">
			</u--image>
			<image @click="deleteImg(index)" class="deleteimg"
				src="https://cdn.hifreeter.com/xiaochengxu/static/login/icon_delete.png" mode="widthFix"></image>
		</div>
		<uploadimg @getdata="getimg" v-if="maxCount>imgList.length">
			<div class="upload">
				<image src="https://cdn.hifreeter.com/xiaochengxu/static/icon_uploadimg.png" mode="widthFix">
				</image>
			</div>
		</uploadimg>
	</div>
</template>

<script>
	import uploadimg from './uploadimg.vue'
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	export default {
		data() {
			return {
				imgList: [],
				keyList: [],
			}
		},
		components: {
			uploadimg
		},
		props: {
			maxCount: {
				type: Number,
				default () {
					return 100;
				}
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		mounted() {
			if (this.list.length > 0) {
				this.getImgListByKey()
			}
		},
		watch: {
			list() {
				if (this.list.length > 0) {
					this.getImgListByKey()
				}
			},
		},
		methods: {
			getimg(e) {
				var that = this;
				that.imgList.push(e.url)
				that.keyList.push(e.key)
				that.getKeyList()
			},
			deleteImg(index) {
				var that = this;
				that.imgList.splice(index, 1)
				that.keyList.splice(index, 1)
				that.getKeyList()
			},
			// 根据key获取图片
			async getImgListByKey() {
				try {
					var that = this;
					that.keyList = that.list
					that.imgList = []
					for (const key of that.keyList) {
						that.imgList.push(await getFileAccessUrl(key))
					}
				} catch (error) {
					console.log(error);
				}
			},
			getKeyList() {
				var that = this;
				let keyList = that.keyList.join(",")
				this.$emit('getdata', keyList)
			},
			// 大图预览
			previewImg(imgUrlList, index) {
				let _this = this;
				// #ifdef MP
				uni.previewImage({
					current: index - 1,
					urls: imgUrlList,
					indicator: 'number',
					loop: true
				});
				// #endif

				// #ifndef MP
				uni.previewImage({
					current: index - 1,
					urls: imgUrlList,
					indicator: 'number',
					loop: true
				});
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.upload {
		width: 140rpx;
		height: 140rpx;
		background: #EDEDED;
		border-radius: 20rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		image {
			width: 34rpx;
		}
	}

	.uploadimg {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;

		.imageItem {
			margin-right: 32rpx;
			width: 140rpx;
			height: 140rpx;
			position: relative;

			.deleteimg {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				top: -14rpx;
				right: -14rpx;
			}
		}

	}

	.mr0 {
		margin-right: 0 !important;
	}
</style>

uploadimg代码封装

<template>
	<div @click="eventHandler">
		<slot></slot>
	</div>
</template>

<script>
	import chooseAndUploadImage from '@/js_sdk/tencentcloud-plugin-cos/choose-and-upload-image.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud-plugin-cos/get-file-access-url.js';
	export default {
		data() {
			return {}
		},
		props: {},
		methods: {
			async eventHandler() {
				try {
					var that = this;
					const key = await chooseAndUploadImage(); // 返回的key即上传到COS的图片文件名（不包含域名部分，一般用来提交给后台接口保存到数据库）
					const url = await getFileAccessUrl(key); // 返回的url即前面上传到COS的图片的访问地址（包含临时签名）
					that.$emit('getdata', {
						key: key,
						url: url
					})
				} catch (error) {
					console.log(error);
				}
			},
		}
	}
</script>