合规性手续新增,进度类别模板更新

src/components/FileUpload/index.vue

@@ -48,7 +48,13 @@
             tag="ul"
             @click.stop
           >
-            <li style="margin-top: 10px" v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+            <li
+              style="margin-top: 10px"
+              v-for="(file, index) in fileList"
+              :key="file.uid"
+              class="el-upload-list__item ele-upload-list__item-content"
+              v-if="autoUpload"
+            >
               <el-link :href="`${file.url}`" :underline="false" target="_blank">
                 <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
               </el-link>
@@ -213,31 +219,27 @@ watch(
 );
 // 上传前校检格式和大小
 const handleBeforeUpload = (file: any) => {
-  // 校检文件类型
-  if (props.fileType.length) {
-    const fileName = file.name.split('.');
-    const fileExt = fileName[fileName.length - 1];
-    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
-    if (!isTypeOk) {
-      proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
-      return false;
-    }
+  if (!validateFile(file)) return false;
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+//校检格式和大小
+const validateFile = (file: File) => {
+  const ext = file.name.split('.').pop()?.toLowerCase();
+  if (props.fileType.length && !props.fileType.includes(ext!)) {
+    proxy?.$modal.msgError(`文件格式不正确，请上传 ${props.fileType.join('/')} 格式文件!`);
+    return false;
   }
-  // 校检文件名是否包含特殊字符
   if (file.name.includes(',')) {
     proxy?.$modal.msgError('文件名不正确，不能包含英文逗号!');
     return false;
   }
-  // 校检文件大小
-  if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize;
-    if (!isLt) {
-      proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-      return false;
-    }
+  if (props.fileSize && file.size / 1024 / 1024 > props.fileSize) {
+    proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+    return false;
   }
-  proxy?.$modal.loading('正在上传文件，请稍候...');
-  number.value++;
   return true;
 };
 
@@ -278,13 +280,25 @@ const handleUploadSuccess = (res: any, file: UploadFileWithOssId) => {
   uploadedSuccessfully(res);
 };
 
-const handleChange = (file: any, fileList: any) => {
+const handleChange = (file: any, filelist: any) => {
+  if (!props.autoUpload) {
+    // 手动上传模式：在选中文件时拦截非法文件
+    const isValid = validateFile(file.raw || file);
+    if (!isValid) {
+      fileUploadRef.value?.handleRemove(file); // 直接移除非法文件
+      console.log(file, filelist, fileList.value);
+      fileList.value = [...fileList.value]; // 触发列表更新
+      return;
+    }
+  }
   // 记录 status = 'ready' 的文件
   if (file.status === 'ready') {
     pendingFiles.value.push(file);
+    fileList.value = pendingFiles.value;
   }
+  console.log(fileList.value);
 
-  emit('handleChange', file, fileList);
+  emit('handleChange', file, filelist);
 };
 
 // 删除文件
@@ -332,11 +346,6 @@ const uploadedSuccessfully = (res: any) => {
     emit('update:modelValue', listToString(fileList.value));
     proxy?.$modal.closeLoading();
   }
-  // if (props.autoUpload && props.limit === fileList.value.length) {
-  //   fileUploadRef.value?.clearFiles();
-  //   fileList.value = [];
-  //   emit('update:modelValue', ''); // 同步到外部 v-model
-  // }
   props.onUploadSuccess?.(fileList.value, res);
 };
 
@@ -400,6 +409,11 @@ const submitUpload = async () => {
   if (!pendingFiles.value.length) {
     return 'noFile';
   }
+  const validFiles = pendingFiles.value.filter((f: any) => validateFile(f.raw || f));
+  if (!validFiles.length) {
+    proxy?.$modal.msgError('没有符合条件的文件可上传');
+    return;
+  }
   try {
     proxy?.$modal.loading('正在上传文件，请稍候...');
     const formData = new FormData();