文件上传格式限制

src/views/myResources/UploadModal.vue

@@ -19,7 +19,7 @@
 
 		<!-- 拖拽上传 -->
 		<uploader-drop class="drop-box" id="dropBox" @paste="handlePaste" @click="handleUpload">
-			<span class="text"> 点击上传或者截图粘贴或将文件拖拽至此区域上传 </span>
+			<span class="text"> 点击上传或将文件拖拽至此区域上传 </span>
 			<p class="text">按住Ctrl可同时多选，支持上传PPT/word/excel/pdf/mp4/zip/rar，单个文件不能超过2G</p>
 			<UploadOutlined class="upload-icon" v-show="pasteImg.src" @click="handleUploadPasteImg" />
 		</uploader-drop>
@@ -40,7 +40,8 @@
 								v-for="file in props.fileList"
 								:key="file.id"
 								class="file-item"
-								:class="{ 'custom-status-item': file.statusStr !== '' }">
+								:class="{ 'custom-status-item': file.statusStr !== '' }"
+							>
 								<uploader-file ref="fileItem" :file="file" :list="true" />
 								<span class="custom-status">{{ file.statusStr }}</span>
 								<!-- 添加剩余时间显示 -->
@@ -128,8 +129,8 @@
 	})
 
 	const attrs = ref({
-		// accept: '.doc,.docx,.ppt,.pptx,.xls,.xlsx'
-		accept: '*'
+		accept: '.doc,.docx,.ppt,.pptx,.xls,.xlsx,.mkv,.mp4,.wmv,.avi,.flv,.mpeg,.mpg,.rmvb,.mov'
+		// accept: '*'
 	})
 
 	const dropBoxShow = ref(false)

src/views/myResources/coverUpload/index.vue

@@ -13,6 +13,7 @@
 		<a-upload
 			ref="upload"
 			:before-upload="beforeUploadCover"
+			accept=".jpg,.png,.bmp,.jpeg"
 			:remove="handleRemoveCover"
 			:headers="headers"
 			:action="action"
@@ -30,22 +31,12 @@
 				}"
 			/>
 		</div>
-		<!-- 文件上传状态展示 -->
-		<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 { Modal } from 'ant-design-vue'
+	import { Modal, Upload, message } from 'ant-design-vue'
 	import tool from '@/utils/tool'
 	const emit = defineEmits(['handleRemoveCover', 'handleChangeCover'])
 	const headers = ref({
@@ -67,19 +58,31 @@
 	// 封面文件列表
 	const coverFileList = ref([])
 	const previewImageUrl = 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 allowedExtensions = ['.jpg', '.png', '.bmp', '.jpeg']
+		// 获取文件扩展名
+		const fileExtension = file.name.slice(file.name.lastIndexOf('.')).toLowerCase()
+		console.log(file, fileExtension, 'filefilefilefile')
+
+		// 验证文件类型
+		const isFileTypeAllowed = allowedExtensions.includes(fileExtension)
+
+		if (!isFileTypeAllowed) {
+			message.error(`不支持的文件格式: ${fileExtension}，请上传以下格式: ${allowedExtensions.join(', ')}`)
+			return false
 		}
+
+		// 验证文件大小（500KB限制）
 		const isLt500K = file.size / 1024 < 500
 		if (!isLt500K) {
-			Modal.error({ content: '单个文件不能超过500kb!' })
+			message.error('文件大小不能超过500KB!')
+			return false
 		}
-		return isJpgOrPng && isLt500K
+
+		return isFileTypeAllowed && isLt500K
 	}
 	// 移除封面文件
 	const handleRemoveCover = (file) => {

src/views/myResources/releaseModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 上传资源模态框 -->
 	<a-modal
-		title="发布课程"
+		title="发布资源"
 		style="width: 800px"
 		v-model:visible="uploadModalVisible"
 		@ok="handleUploadOk"
@@ -36,7 +36,7 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { Modal, Upload } from 'ant-design-vue'
+	import { Modal, Upload, message } from 'ant-design-vue'
 	import { PlusOutlined } from '@ant-design/icons-vue'
 	import coverUpload from './coverUpload/index.vue'
 	import tool from '@/utils/tool'