assess-app/components/en-utils/en-upload/en-upload.vue

<template>
	<view class="">
		<view class="upload-image">
			<image class="wh-110 m-t20 m-r16" :style="[{width},{height}]" src="/static/img/logo.png" mode="aspectFill"
				v-for="(item,index) in 3" @click="onPreviewImage(index)">
			</image>
			<view class="add-image column-c justify-center m-t20" @click="addUpload()" v-if="is_add">
				<image class="wh-45" src="/static/img/task-details/Mask oup.png" mode=""></image>
				<text class="size-24 text-color-666">{{text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: '图片'
			},
			is_add: {
				type: Boolean,
				default: true
			},
			width: {
				type: String,
				default: '110rpx'
			},
			height: {
				type: String,
				default: '110rpx'
			},
			fileList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				fileData: []
			}
		},
		methods: {
			addUpload() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths
						console.log(tempFilePaths)
						// tempFilePaths.forEach(item => {
						// 	uni.uploadFile({
						// 		url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						// 		filePath: tempFilePaths[0],
						// 		name: 'file',
						// 		formData: {
						// 			'user': 'test'
						// 		},
						// 		success: (uploadFileRes) => {
						// 			console.log(uploadFileRes.data);
						// 		}
						// 	})
						// })
					}
				});
			},
			onPreviewImage(index) {
				uni.previewImage({
					urls: this.fileList,
					current: index
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-image {
		display: flex;
		flex-wrap: wrap;
	}

	.add-image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		background: #F4F4F4;
	}
</style>