chore: update

src/components/base/AppUpload.vue

@@ -9,6 +9,8 @@ interface Props {
   modelValue: string | { name: string; url: string }[]
   prefix?: string
   size?: number
+  beforeUpload?: (file: any) => boolean | void
+  onChange?: (file: any, files: any) => void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,10 +52,13 @@ const handleBeforeUpload = async (file: any) => {
     url: `${response.host}/${key}`
   }
   file.url = `${response.host}/${key}`
+  if (props.beforeUpload) {
+    return props.beforeUpload(file)
+  }
 }
 
 // 上传成功
-const handleSuccess = (response: any, file: any, files: any) => {
+const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => {
   if (!files.every((item: any) => item.status === 'success')) return
   if (showFileList.value) {
     emit(
@@ -79,11 +84,11 @@ const handleExceed: UploadProps['onExceed'] = () => {
 }
 
 // 删除
-const handleRemove: UploadProps['onRemove'] = (file, files) => {
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   if (showFileList.value) {
     emit(
       'update:modelValue',
-      files.map((item: any) => {
+      uploadFiles.map((item: any) => {
         return { name: item.name, url: item.url || item.raw.url }
       })
     )
@@ -96,6 +101,10 @@ const handleRemove: UploadProps['onRemove'] = (file, files) => {
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
   window.open(uploadFile.url)
 }
+
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
 </script>
 
 <template>
@@ -104,13 +113,13 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :data="uploadData"
     :show-file-list="showFileList"
     :before-upload="handleBeforeUpload"
+    :on-change="handleChange"
     :on-exceed="handleExceed"
     :on-remove="handleRemove"
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
-    class="uploader"
-  >
+    class="uploader">
     <slot>
       <template v-if="showFileList">
         <template v-if="$attrs['list-type'] === 'picture-card'">

src/modules/bbs/components/DiscussForm.vue

@@ -4,7 +4,7 @@ import { ElMessage } from 'element-plus'
 import AppUpload from '@/components/base/AppUpload.vue'
 import AppEditor from '@/components/base/AppEditor.vue'
 import { replyToPost } from '../api'
-
+import { isVideo } from '@/utils/index'
 interface Props {
   id: string
 }
@@ -39,6 +39,24 @@ const create = () => {
     emit('update:modelValue', false)
   })
 }
+
+const images = $computed(() => {
+  return form.files.filter((item: any) => !isVideo(item.url))
+})
+const videos = $computed(() => {
+  return form.files.filter((item: any) => isVideo(item.url))
+})
+
+function beforeUpload(file: any) {
+  if (images.length >= 10 && !isVideo(file.url)) {
+    ElMessage.error('最多上传10张图片')
+    return false
+  }
+  if (videos.length >= 1 && isVideo(file.url)) {
+    ElMessage.error('最多上传1个视频')
+    return false
+  }
+}
 </script>
 
 <template>
@@ -54,7 +72,7 @@ const create = () => {
         <AppEditor v-model="form.content" :height="300" />
       </el-form-item>
       <el-form-item prop="files">
-        <AppUpload v-model="form.files">
+        <AppUpload v-model="form.files" accept="image/*,video/*" :beforeUpload="beforeUpload">
           <el-button size="default">上传图片/视频附件</el-button>
           <template #tip
             >支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内<br />视频最多上传1个，100Mb以内

src/modules/bbs/components/FileList.vue

 <script setup lang="ts">
 import type { File } from '../types'
 import { VideoPlay } from '@element-plus/icons-vue'
+import { isVideo } from '@/utils/index'
+
 interface Props {
   preview?: boolean
   data: File[] | Record<string, File[]>
@@ -22,10 +24,6 @@ const videos = $computed(() => {
   if (!Array.isArray(props.data)) return []
   return props.data.filter(item => isVideo(item.url))
 })
-
-function isVideo(url: string) {
-  return url.includes('.mp4')
-}
 </script>
 
 <template>
@@ -39,10 +37,17 @@ function isVideo(url: string) {
         :preview-src-list="imageSrcList"
         fit="cover" />
     </div>
-    <div class="file-item" v-for="(item, index) in videos" :key="index">
-      <video :src="item.url" />
-      <el-icon class="icon-video-play"><VideoPlay /></el-icon>
-    </div>
+    <template v-if="preview">
+      <div class="video-item" v-for="(item, index) in videos" :key="index">
+        <video :src="item.url" controls />
+      </div>
+    </template>
+    <template v-else>
+      <div class="file-item" v-for="(item, index) in videos" :key="index">
+        <video :src="item.url" />
+        <el-icon class="icon-video-play"><VideoPlay /></el-icon>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -58,8 +63,8 @@ function isVideo(url: string) {
   width: 160px;
   height: 90px;
   video {
-    width: 160px;
-    height: 90px;
+    width: 100%;
+    height: 100%;
   }
   .icon-video-play {
     position: absolute;
@@ -70,6 +75,14 @@ function isVideo(url: string) {
     color: #fff;
   }
 }
+.video-item {
+  display: block;
+  width: 320px;
+  video {
+    width: 100%;
+    height: auto;
+  }
+}
 .file-item__count {
   position: absolute;
   left: 0;

src/modules/bbs/components/PostForm.vue

@@ -6,6 +6,7 @@ import AppEditor from '@/components/base/AppEditor.vue'
 import { createPost } from '../api'
 import { useMapStore } from '@/stores/map'
 import { useGetCourseList } from '@/composables/useGetCourseList'
+import { isVideo } from '@/utils/index'
 
 interface Props {
   courseId?: string
@@ -57,6 +58,23 @@ const create = () => {
     emit('update:modelValue', false)
   })
 }
+const images = $computed(() => {
+  return form.files.filter((item: any) => !isVideo(item.url))
+})
+const videos = $computed(() => {
+  return form.files.filter((item: any) => isVideo(item.url))
+})
+
+function beforeUpload(file: any) {
+  if (images.length >= 10 && !isVideo(file.url)) {
+    ElMessage.error('最多上传10张图片')
+    return false
+  }
+  if (videos.length >= 1 && isVideo(file.url)) {
+    ElMessage.error('最多上传1个视频')
+    return false
+  }
+}
 </script>
 
 <template>
@@ -92,7 +110,7 @@ const create = () => {
         <AppEditor v-model="form.content" :height="300" />
       </el-form-item>
       <el-form-item prop="files">
-        <AppUpload v-model="form.files">
+        <AppUpload v-model="form.files" accept="image/*,video/*" :beforeUpload="beforeUpload">
           <el-button size="default">上传图片/视频附件</el-button>
           <template #tip
             >支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内<br />视频最多上传1个，100Mb以内

src/utils/index.ts

@@ -16,3 +16,8 @@ export function formatLiveStatus(status: LiveStatusType) {
 export function formatQuestionType(type: QuestionType) {
   return questionType[type] || type
 }
+
+// 是否是视频
+export function isVideo(url: string) {
+  return url.includes('.mp4')
+}