Ver Fonte

feat(licenseManagement): 添加图片上传限制提示和文件大小验证

- 在合同管理和食品经营许可证页面添加上传提示文字
- 限制上传图片格式为 jpg、png,大小不超过 20M
- 添加文件大小验证逻辑,超出限制则移除文件并提示用户
- 更新样式以显示上传提示信息
congxuesong há 2 semanas atrás
pai
commit
635546694a

+ 25 - 0
src/views/licenseManagement/contractManagement.vue

@@ -45,6 +45,7 @@
     >
       <el-scrollbar height="400px" class="replace-upload-scrollbar">
         <div class="replace-upload-area" :class="{ 'upload-full': uploadedImageCount >= uploadMaxCount }">
+          <div class="upload-tip">只允许上传jpg,png格式图片;上传图片不得超过20M</div>
           <el-upload
             v-model:file-list="fileList"
             list-type="picture-card"
@@ -351,6 +352,27 @@ const handleUploadChange: UploadProps["onChange"] = async (uploadFile, uploadFil
       ElMessage.warning("只支持上传 JPG 和 PNG 格式的图片");
       return;
     }
+
+    // 检查文件大小,不得超过20M
+    const maxSize = 20 * 1024 * 1024; // 20MB
+    if (uploadFile.raw.size > maxSize) {
+      // 从文件列表中移除超过大小的文件
+      const index = fileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (index > -1) {
+        fileList.value.splice(index, 1);
+      }
+      // 从 uploadFiles 中移除
+      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (uploadIndex > -1) {
+        uploadFiles.splice(uploadIndex, 1);
+      }
+      // 如果文件有 blob URL,释放它
+      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
+        URL.revokeObjectURL(uploadFile.url);
+      }
+      ElMessage.warning("上传图片不得超过20M");
+      return;
+    }
   }
 
   // 同步文件列表到表单数据(只添加通过验证的文件)
@@ -655,6 +677,9 @@ const getStatusName = (status: number) => {
 .replace-upload-area {
   min-height: 300px;
   padding: 20px;
+  .upload-tip {
+    margin-bottom: 10px;
+  }
   :deep(.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label) {
     display: inline-flex !important;
     opacity: 1 !important;

+ 28 - 1
src/views/licenseManagement/foodBusinessLicense.vue

@@ -27,6 +27,7 @@
       :close-on-press-escape="false"
     >
       <div class="replace-upload-area" :class="{ 'upload-full': uploadedImageCount >= 1 }">
+        <div class="upload-tip">只允许上传jpg,png格式图片;上传图片不得超过20M</div>
         <el-upload
           v-model:file-list="fileList"
           list-type="picture-card"
@@ -330,6 +331,27 @@ const handleUploadChange: UploadProps["onChange"] = async (uploadFile, uploadFil
       ElMessage.warning("只支持上传 JPG 和 PNG 格式的图片");
       return;
     }
+
+    // 检查文件大小,不得超过20M
+    const maxSize = 20 * 1024 * 1024; // 20MB
+    if (uploadFile.raw.size > maxSize) {
+      // 从文件列表中移除超过大小的文件
+      const index = fileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (index > -1) {
+        fileList.value.splice(index, 1);
+      }
+      // 从 uploadFiles 中移除
+      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
+      if (uploadIndex > -1) {
+        uploadFiles.splice(uploadIndex, 1);
+      }
+      // 如果文件有 blob URL,释放它
+      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
+        URL.revokeObjectURL(uploadFile.url);
+      }
+      ElMessage.warning("上传图片不得超过20M");
+      return;
+    }
   }
 
   // 同步文件列表到表单数据(只添加通过验证的文件)
@@ -620,8 +642,13 @@ const getStatusText = (status: string) => {
   padding: 40px 20px;
 }
 .replace-upload-area {
+  .upload-tip {
+    margin-bottom: 10px;
+  }
+
   min-height: 300px;
-  padding: 20px;
+
+  // padding: 20px;
   :deep(.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label) {
     display: inline-flex !important;
     opacity: 1 !important;