ks-app-employment-service/packageRc/pages/demand/components/ImageUpload.vue

<template>
	<view class="upload-container">
		<u-upload :disabled="disabled" :width="width" :height="height" :fileList="internalFileList" :name="name" :multiple="multiple"
			:maxCount="maxCount" @afterRead="handleAfterRead" @delete="handleRemove">
		</u-upload>
	</view>
</template>

<script>
//	import {
//		uploadImg
//	} from '@/api/company'
	import config from '@/config'
//	import {
//		getToken
//	} from '@/utils/auth'
	export default {
		props: {
			maxSize: {
				type: Number,
				default: 5, // 最大文件大小（MB）
			},
			allowedFormats: {
				type: Array,
				default: () => [], // 允许的文件格式
			},
			maxImageSize: {
				type: Object,
				default: () => ({
					width: 2048,
					height: 2048
				}), // 图片最大宽度和高度
			},
			width: {
				type: String,
				default: '100rpx', // 默认宽度
			},
			height: {
				type: String,
				default: '100rpx', // 默认高度
			},
			name: {
				type: String,
				default: 'file', // 默认name字段
			},
			multiple: {
				type: Boolean,
				default: false, // 是否允许多选，默认不允许
			},
			maxCount: {
				type: Number,
				default: 1, // 默认最大上传数量为1
			},
			fileList: {
				type: Array,
				default: () => [], // 默认的文件列表为空
			},
			disabled: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {
				internalFileList: Array.isArray(this.fileList) ? [...this.fileList] : [], // 内部的文件列表，确保与父组件的同步
			};
		},
		watch: {
			// 监听 fileList 的变化，确保内外部数据同步
			fileList(newVal) {
				this.internalFileList = Array.isArray(newVal) ? [...newVal] : [];
			},
		},
		methods: {
			// 新增图片
			async handleAfterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this.internalFileList.length;
				lists.map((item) => {
					this.internalFileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					if (this.allowedFormats.length > 0) {
						let fileType = lists[i].name.split('.').pop().toLowerCase();
						if (!this.allowedFormats.includes(fileType)) {
							// this.$emit('error', '不支持的文件格式');
							uni.showToast({
								title: '不支持的文件格式',
								icon: 'none',
							});
							this.internalFileList.splice(fileListLen, 1);
							this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
							return;
						}
					}
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.internalFileList[fileListLen];
					this.internalFileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							data: result,
						})
					);
					fileListLen++;
					this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: config.baseUrl + '/system/oss/upload',
						filePath: url,
						name: "file",
						header: {
							Authorization: "Bearer " + getToken(),
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							resolve(res.data);
						},
						fail: (err) => {
							console.log(err);
						},
					});
				});
			},
			handleRemove({file, index}) {
				this.internalFileList.splice(index, 1); // 从文件列表中移除指定文件
				this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
			},
		},
	};
</script>

<style scoped>
	.upload-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed #ccc;
		border-radius: 4px;
		padding: 20px;
	}
</style>