OnlineEducation-teacher-front/src/components/UpLoadImg/index.vue

<template>
	<div class="cover-upload-row">
		<a-upload
			:show-upload-list="false"
			:before-upload="beforeUploadImg"
			accept=".jpg,.png"
			:action="action"
			:headers="headers"
			@change ="handleChange"
		>
			<div class="cover-upload-box">
				<img v-if="form.coverUrl" :src="form.coverUrl" class="cover-img"/>
				<div v-else class="cover-placeholder">
					<PictureOutlined style="font-size: 32px; color: #bbb"/>
				</div>
			</div>
		</a-upload>
		<div class="cover-tip">支持jpg、png等格式文件上传，文件大小不超过10MB</div>
	</div>

</template>

<script setup>
import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
import {message} from 'ant-design-vue'
import {PictureOutlined, CloudUploadOutlined} from '@ant-design/icons-vue'
import tool from "@/utils/tool";
import sysConfig from '@/config/index'
const action = ref(sysConfig.API_URL +'/api/webapp/dev/file/uploadMinioReturnId')
const headers = ref({
	token: tool.data.get('TOKEN')
})
//课程类型


const props = defineProps({
	count: Number,
	default : () => 1
})
const emit = defineEmits(['update:visible', 'ok','handlerUpSelect','handlerNewSelect','handlerUpImage'])

const modalVisible = ref(props.visible)
watch(
	() => props.visible,
	(v) => {
		modalVisible.value = v
	}
)
watch(modalVisible, (v) => {
	emit('update:visible', v)
})

const formRef = ref()
const file = ref({
	id : '',
	name: '',
})
const form = reactive({

	id : '',
	title: '',
	video: '',
	coverUrl: '',
	docUrl: '',
	srtUrl: ''
})

const rules = {
	title: [{required: true, message: '请输入课时名称'}],
	video: [{required: true, message: '请选择或上传视频'}],
	coverUrl: [{required: true, message: '请上传封面'}]
}

// mock视频资源
const videoList = ref([
	{id: 'v1', name: '示例视频1.mp4'},
	{id: 'v2', name: '示例视频2.mp4'}
])

const beforeUploadImg = (file)=> {
	const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
	const isLt10M = file.size / 1024 / 1024 < 10
	if (!isImg) {
		message.error('只能上传jpg/png图片')
		return false
	}
	if (!isLt10M) {
		message.error('图片不能超过10MB')
		return false
	}
	// mock上传
	const reader = new FileReader()
	reader.onload = (e) => {
		form.coverUrl = e.target.result
	}
	reader.readAsDataURL(file)
	return true
}

//回显用显示图片
const setImage = (src) => {
	form.coverUrl = src
}


const dummyRequest = ({ file, onSuccess, onError }) => {
	console.log('走了吗',onSuccess)
	setTimeout(() => {
		onSuccess('ok')
	}, 500)
}
const handleChange = (res) => {
	console.log('上传图片',res)
	if (res.file && res.file.response &&res.file.response.code == 200) {
		message.success('上传成功')
		form.id =	res.file.response.data
		emit('handlerUpImage',form.id)
	} else {
		// message.error('上传失败')
	}
}
const setFile = (fileData) => {
	console.log("设置了文件",fileData)
	file.value.id = fileData.id
	file.value.name = fileData.fileName
}

const handleOk = () =>{
	formRef.value.validate().then(() => {
		emit('ok', {...form})
		modalVisible.value = false
	})
}

const getData = (callBack) => {
	formRef.value.validate().then(() => {
		callBack({...form})
	})
}

const handleCancel = () => {
	modalVisible.value = false
}

defineExpose({
	getData,setFile,setImage
})
</script>


<style lang="less" scoped>
.add-class-hours-modal {
	.ant-modal-content {
		border-radius: 10px;
	}

	.ant-modal-header {
		border-radius: 10px 10px 0 0;
	}

	.ant-form-item {
		margin-bottom: 24px;
	}

	.video-select-row {
		display: flex;
		align-items: center;
	}

	.cover-upload-row {
		display: flex;
		align-items: center;

		.cover-upload-box {
			width: 120px;
			height: 120px;
			background: #f7f8fa;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24px;
			border: 1px dashed #d9d9d9;
			cursor: pointer;

			.cover-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}

			.cover-placeholder {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				color: #bbb;
				font-size: 32px;
			}
		}

		.cover-tip {
			color: #888;
			font-size: 13px;
		}
	}

	.upload-tip {
		color: #888;
		font-size: 13px;
		margin-left: 12px;
	}

	.footer-btns {
		display: flex;
		justify-content: flex-end;
		gap: 16px;
		margin-top: 24px;
	}
}
</style>