OnlineEducation-back-front/src/views/myResources/coverUpload/index.vue

<template>
	<div>
		<div style="margin-bottom: 10px">
			<!-- <a-button type="primary" @click="chooseFile" :disabled="coverFileList.length > 0 && isedit">选择图片</a-button> -->
			<a-button
				type="primary"
				@click="chooseFile"
				:disabled="isedit ? coverFileList.length > 0 && isedit : coverFileList.length > 0"
				>选择图片</a-button
			>
			<span style="margin-left: 10px">仅支持上传jpg/png格式文件，单个文件不能超过500kb</span>
		</div>
		<a-upload
			ref="upload"
			:before-upload="beforeUploadCover"
			:file-list="coverFileList"
			:remove="handleRemoveCover"
			:headers="headers"
			:action="action"
			:on-change="handleChangeCover"
			list-type="picture-card"
		>
			<div v-if="coverFileList.length < 1">
				<plus-outlined />
				<div class="ant-upload-text">上传图片</div>
			</div>
		</a-upload>
		<!-- 文件上传状态展示 -->
		<ul v-if="fileList.length">
			<li v-for="(file, index) in fileList" :key="index" class="file-item">
				<span>{{ file.name }}</span>
				<a-progress :percent="file.percent || 0" />
				<span v-if="file.status === 'done'">已完成</span>
				<span v-else-if="file.status === 'error'">上传失败</span>
				<span v-else-if="file.status === 'uploading'">上传中...</span>
			</li>
		</ul>
	</div>
</template>

<script setup>
	import { ref, reactive, toRefs } from 'vue'
	import tool from '@/utils/tool'
	const emit = defineEmits(['handleRemoveCover', 'handleChangeCover'])
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const props = defineProps({
		coverImageId: {
			type: Number,
			required: true,
			default: null
		},
		isedit: {
			type: Boolean,
			required: true,
			default: false
		}
	})
	const action = ref('/api/webapp/dev/file/uploadMinioReturnId')
	// 封面文件列表
	const coverFileList = ref([])
	const fileList = ref([])
	const coverImageId = ref(null)
	// 上传封面前的钩子函数
	const beforeUploadCover = (file) => {
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
		if (!isJpgOrPng) {
			Modal.error({ content: '仅支持上传jpg/png格式文件!' })
		}
		const isLt500K = file.size / 1024 < 500
		if (!isLt500K) {
			Modal.error({ content: '单个文件不能超过500kb!' })
		}
		return isJpgOrPng && isLt500K
	}

	// 移除封面文件
	const handleRemoveCover = (file) => {
		const index = coverFileList.value.indexOf(file)
		const newFileList = coverFileList.value.slice()
		newFileList.splice(index, 1)
		coverFileList.value = newFileList
		// 如果移除的是当前封面文件，则清空coverImageId
		if (coverImageId.value === file.id) {
			coverImageId.value = null
			emit('handleRemoveCover')
		}
	}

	// 封面文件状态改变时的处理函数
	const handleChangeCover = ({ file, fileList: newFileList }) => {
		if (file.status === 'done') {
			// 上传成功，获取文件ID
			const fileId = file.response?.data || file.id
			console.log('上传成功，获取文件ID', fileId)
			if (fileId) {
				coverImageId.value = fileId
				emit('handleChangeCover', fileId)
			}
		}
		if (file.status === 'error') {
			// 延迟移除，确保用户能看到错误提示
			setTimeout(() => {
				coverFileList.value = coverFileList.value.filter((f) => f.uid !== file.uid)
			}, 1500)
		}
		coverFileList.value = newFileList
	}

	// 选择文件按钮点击事件
	const chooseFile = () => {
		document.querySelector('.ant-upload input').click()
	}
</script>

<style lang="scss"></style>