Merge pull request #10218 from dataease/pr@dev-v2@feat_svg_background

feat(仪表板、数据大屏): 支持背景上传SVG动图并做后端验证 #7169

core/core-backend/src/main/java/io/dataease/visualization/server/StaticResourceServer.java

@@ -15,9 +15,15 @@ import org.springframework.util.FileCopyUtils;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.multipart.MultipartFile;
+import org.w3c.dom.Document;
+import org.xml.sax.SAXException;
 
 import javax.imageio.ImageIO;
+import javax.xml.parsers.DocumentBuilder;
+import javax.xml.parsers.DocumentBuilderFactory;
+import javax.xml.parsers.ParserConfigurationException;
 import java.awt.image.BufferedImage;
+import java.io.File;
 import java.io.IOException;
 import java.io.InputStream;
 import java.nio.file.Files;
@@ -65,7 +71,12 @@ public class StaticResourceServer implements StaticResourceApi {
             LogUtil.error(e.getMessage(), e);
             return false;
         }
-        if (image == null || image.getWidth() <= 0 || image.getHeight() <= 0) {
+        // 判断是否为SVG
+        if(isValidSVG(file)){
+            return true;
+        }
+        // 判断其他图片
+        if (image == null || image.getWidth() <= 0 || image.getHeight() <= 0 || !isValidSVG(file)) {
             return false;
         }
         return true;
@@ -116,4 +127,27 @@ public class StaticResourceServer implements StaticResourceApi {
         return null;
     }
 
+    private static boolean isValidSVG(MultipartFile file) {
+        if (file == null || file.isEmpty()) {
+            return false;
+        }
+
+        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
+        dbf.setNamespaceAware(true);
+
+        try (InputStream inputStream = file.getInputStream()) {
+            DocumentBuilder db = dbf.newDocumentBuilder();
+            Document doc = db.parse(inputStream);
+
+            // 检查根元素是否是<svg>
+            if ("svg".equals(doc.getDocumentElement().getNodeName())) {
+                return true;
+            } else {
+                return false;
+            }
+        } catch (ParserConfigurationException | SAXException | IOException e) {
+            // 如果出现任何解析错误，说明该文件不是合法的SVG
+            return false;
+        }
+    }
 }

core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue

@@ -187,7 +187,7 @@
                 class="image-hint"
                 :class="`image-hint_${themes}`"
               >
-                支持JPG、PNG、GIF
+                支持JPG、PNG、GIF、SVG
               </span>
 
               <el-button

core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue

@@ -94,7 +94,7 @@
                 class="image-hint"
                 :class="`image-hint_${themes}`"
               >
-                支持JPG、PNG、GIF
+                支持JPG、PNG、GIF、SVG
               </span>
               <el-button
                 size="small"

core/core-frontend/src/custom-component/picture/Attr.vue

@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
             class="image-hint"
             :class="`image-hint_${themes}`"
           >
-            支持JPG、PNG、GIF
+            支持JPG、PNG、GIF、SVG
           </span>
 
           <el-button

core/core-frontend/src/locales/zh-CN.ts

@@ -1936,7 +1936,7 @@ export default {
     panel_cache_use_tips: '检查到上次有仪表板未能正常保存，是否使用上次未保存的仪表板？',
     template_name_tips: '仪表板名称必填',
     panel_background_item: '自定义仪表板背景',
-    panel_background_image_tips: '支持JPG、PNG、GIF',
+    panel_background_image_tips: '支持JPG、PNG、GIF、SVG',
     reUpload: '重新上传',
     create_by: '创建人',
     create_time: '创建时间',

core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue

@@ -94,7 +94,7 @@
                 class="image-hint"
                 :class="`image-hint_${themes}`"
               >
-                支持JPG、PNG、GIF，大小不超过 1M
+                支持JPG、PNG、GIF、SVG，大小不超过 1M
               </span>
               <el-button
                 size="small"