shuhi-app/components/cy-upload/index.vue

<template>
	<u-upload v-bind="$attrs" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :notFile="notFile"
		:disabled="disabled" :multiple="multiple" :maxCount="maxCount">
	</u-upload>
	<view class="tips" v-if="tips">{{tips}}</view>
</template>

<script setup name="cyUpload">
	import {
		watch,
		ref
	} from 'vue';
	import baseUrl from '@/config/request.js';
	const emit = defineEmits(['update:filename', 'update:keyValue', 'success','update:loading'])

	const props = defineProps({
		filename: {
			type: [Array, String],
			default: () => []
		},
		url: {
			type: String,
			default: '/app/common/upload'
		},
		notFile: {
			type: Boolean,
			default: false
		},
		tips: {
			type: String
		},
		disabled: {
			type: Boolean,
			default: false
		},
		isUpdate: {
			type: Boolean,
			default: false
		},
        loading:{
            type:Boolean,
            default:false
        },
        multiple: {
            type: Boolean,
            default: false
        },
        maxCount: {
            type: [Number, String],
            default: 9
        }
	})
	const fileList = ref([])

	watch(() => props.filename, (filename) => {
		if (!filename) return fileList.value = []
		if (typeof filename == 'string') {
			fileList.value = filename.split(',').map(v => ({
				url: baseUrl + v,
			}))
		} else {
			fileList.value = filename && filename.length > 0 ? filename.map(v => ({
				url: v.url || v,
			})) : []
		}
	}, {
		immediate: true,
		deep: true
	})

	const afterRead = async (e) => {
		const files = Array.isArray(e.file) ? e.file : [e.file]
        emit('update:loading', true)
        try {
            for (const file of files) {
                const idx = fileList.value.length
                fileList.value.push({
                    ...file,
                    status: 'uploading',
                    message: '上传中...',
                })
                const result = await uploadFilePromise(file.url, props.url)
                if (fileList.value[idx]) {
                    fileList.value[idx].url = result.url || result.data?.url || result.fileName || file.url
                    fileList.value[idx].status = 'success'
                    fileList.value[idx].message = ''
                }
                emit('success', result)
            }
            emit('update:filename', fileList.value.map(v => v.url).filter(Boolean))
        } finally {
            emit('update:loading', false)
        }
	}

	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
		emit('update:filename', fileList.value.map(v => v.url).filter(Boolean))
	}

	const uploadFilePromise = (url, baseStr = '/app/common/upload') => {
		let token = uni.getStorageSync('token')
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + baseStr,
				filePath: url,
				name: 'file',
				header: {
					"Authorization": token
				},
				success: (res) => {
					let respic = JSON.parse(res.data)
					resolve(respic)
				},
                fail: reject
			});
		});
	};
</script>

<style lang="scss" scoped>
	.tips {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #969696;
		line-height: 48rpx;
		margin-top: 10rpx;
	}

	::v-deep .align-right .u-upload__wrap {
		justify-content: flex-end;
	}
</style>