updates

src/modules/teach/posts/components/ReplyPostDialog.vue

 <script lang="ts" setup>
+import { ElMessage } from 'element-plus'
 import AppUpload from '@/components/base/AppUpload.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { replyPosts } from '../api'
@@ -27,6 +28,34 @@ const rules = reactive<FormRules>({
   content: [{ required: true, message: '请填写正文内容', trigger: 'blur' }]
 })
 
+const videoLimit = $computed(() => {
+  return form.files.filter((item: any) => item.url.includes('.mp4'))
+})
+const imgLimit = $computed(() => {
+  return form.files.filter(
+    (item: any) => item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg')
+  )
+})
+
+const beforeUploadFiles = (file: any) => {
+  console.log(file)
+  if (file.type.includes('video/') && file.size > 104857600) {
+    ElMessage.warning('视频大小不能超过100MB')
+    return false
+  }
+  if (file.type.includes('image/') && file.size > 2097152) {
+    ElMessage.warning('图片大小不能超过2MB')
+    return false
+  }
+  if (imgLimit.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
+    ElMessage.warning('最多只能上传10张图片')
+    return false
+  }
+  if (videoLimit.length >= 1 && file.url.includes('.mp4')) {
+    ElMessage.warning('最多只能上传1个视频')
+    return false
+  }
+}
 // 取消
 const handleCancel = () => {
   emit('update:isShowReplyDialog', false)
@@ -66,23 +95,13 @@ const handleConfirm = async (formEl: FormInstance | undefined) => {
             type="textarea"
           />
         </el-form-item>
-        <el-form-item>
-          <div>
-            <div class="upload-video">
-              <div class="upload-box">
-                <AppUpload
-                  accept=".mp4,.png,.jpeg,.jpg"
-                  :limit="11"
-                  :multiple="true"
-                  v-model="form.files"
-                  :isPost="'1'"
-                ></AppUpload>
-              </div>
-            </div>
-            <div class="tips">
-              支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内 <br />视频最多长传1个，100Mb以内
-            </div>
-          </div>
+        <el-form-item prop="files">
+          <AppUpload v-model="form.files" accept="image/*,video/*" :beforeUploadFiles="beforeUploadFiles">
+            <el-button size="default">上传图片/视频附件</el-button>
+            <template #tip
+              >支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内<br />视频最多上传1个，100Mb以内
+            </template>
+          </AppUpload>
         </el-form-item>
       </el-form>
     </div>