hookehuyr

fix(文件上传): 限制视频上传格式并添加MOV格式提示

在视频上传前检查文件格式,拦截MOV文件并显示兼容性提示对话框
将视频上传的accept类型限制为MP4格式,更新上传提示信息
<!--
* @Date: 2025-09-30 17:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-23 16:59:38
* @LastEditTime: 2026-01-24 15:23:44
* @FilePath: /mlaj/src/views/checkin/CheckinDetailPage.vue
* @Description: 用户打卡详情页
-->
......@@ -99,7 +99,7 @@
<!-- 文件上传区域 -->
<div v-if="activeType !== '' && activeType !== 'text'" class="upload-area">
<van-uploader v-model="displayFileList" :max-count="maxCount" :max-size="maxFileSizeBytes"
:before-read="beforeRead" :after-read="afterRead" @delete="onDelete"
:before-read="beforeReadGuard" :after-read="afterRead" @delete="onDelete"
@click-preview="onClickPreview" multiple :accept="getAcceptType()" result-type="file"
:deletable="true" upload-icon="plus" />
......@@ -191,7 +191,7 @@ import AudioPlayer from '@/components/media/AudioPlayer.vue'
import VideoPlayer from '@/components/media/VideoPlayer.vue'
import AddTargetDialog from '@/components/count/AddTargetDialog.vue'
import CheckinTargetList from '@/components/count/CheckinTargetList.vue'
import { showToast, showLoadingToast } from 'vant'
import { showToast, showLoadingToast, showDialog } from 'vant'
import dayjs from 'dayjs'
const route = useRoute()
......@@ -224,6 +224,28 @@ const {
gratitudeFormList
} = useCheckin()
const beforeReadGuard = (file) => {
if (activeType.value !== 'video') return beforeRead(file)
const files = Array.isArray(file) ? file : [file]
const hasMov = files.some(item => {
const fileName = String(item?.name || '').toLowerCase()
const fileType = String(item?.type || '').toLowerCase()
return fileName.endsWith('.mov') || fileType.includes('quicktime')
})
if (hasMov) {
showDialog({
title: '不支持 MOV 格式',
message: 'MOV(QuickTime)在非苹果系统/部分播放器兼容性较差,可能出现无法打开、黑屏、无声等问题。\n\n请将视频导出/转换为 MP4(更通用)后再上传。',
confirmButtonText: '我知道了',
})
return false
}
return beforeRead(file)
}
/**
* 获取指定类型的文件数量
* @param {string} type - 文件类型
......@@ -685,7 +707,7 @@ const getFileIcon = () => {
const getAcceptType = () => {
const acceptMap = {
'image': 'image/*',
'video': 'video/*',
'video': '.mp4,video/mp4',
'audio': '.mp3,.wav,.aac,.flac,.ogg,.wma,.m4a'
}
return acceptMap[activeType.value] || '*'
......@@ -698,7 +720,7 @@ const getAcceptType = () => {
const getUploadTips = () => {
const tipsMap = {
'image': '支持格式:.jpg/.jpeg/.png',
'video': '支持格式:视频文件',
'video': '支持格式:.mp4(不支持 .mov)',
'audio': '支持格式:.mp3/.wav/.aac/.flac/.ogg/.wma/.m4a'
}
return tipsMap[activeType.value] || ''
......