OnlineEducation-student-front/src/components/UpLoadSrt/index.vue

<template>
	<div class="cover-upload-row">
		<a-upload
			:show-upload-list="false"
			:before-upload="beforeUploadSrt"
			accept=".srt"
			@change="handleChange"
			:action="action"
			:headers="headers"
		>
			<a-button v-if="form.id ==''">
				<CloudUploadOutlined/>
				上传文件
			</a-button>
			<span v-if="form.id !=''" style="cursor: pointer;">{{form.name}}</span>
		</a-upload>
		<span class="upload-tip">仅支持srt格式文件上传，文件大小不超过1MB</span>
	</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','handlerUpSrt'])

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: '',
	name : ''
})

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 beforeUploadSrt = (file) => {
	const isSrt = file.name.endsWith('.srt')
	const isLt1M = file.size / 1024 / 1024 < 1
	if (!isSrt) {
		message.error('仅支持srt格式')
		return false
	}
	if (!isLt1M) {
		message.error('文件不能超过1MB')
		return false
	}
	form.name = file.name
	return true
}
//回显用显示图片
const setData = (data) => {
	form.id = data.id
	form.name = data.name
	emit('handlerUpSrt',form.id)
}


const dummyRequest = ({onSuccess}) => {
}
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('handlerUpSrt',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,setData
})
</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>