Эх сурвалжийг харах

图片、视频文件使用inline直接预览

陈长荣 2 сар өмнө
parent
commit
6b2b9b4154

+ 12 - 2
src/main/java/com/github/jfcloud/excel/editor/docdeal/controller/FileController.java

@@ -13,12 +13,15 @@ import com.github.jfcloud.excel.editor.docdeal.oss.OssProperties;
 import com.github.jfcloud.excel.editor.docdeal.oss.service.OssTemplate;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.MediaType;
+import org.springframework.http.MediaTypeFactory;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
+import java.util.Optional;
 
 @Slf4j
 @Controller
@@ -83,9 +86,16 @@ public class FileController {
                 return;
             }
 
-            response.setContentType("application/octet-stream");
             response.setContentLength((int) s3Object.getObjectMetadata().getContentLength());
-            response.setHeader("Content-Disposition", "attachment;filename*=utf8''" + URLEncodeUtil.encode(name));
+
+            String type = "attachment";
+            Optional<MediaType> opt = MediaTypeFactory.getMediaType(name);
+            if (opt.isPresent()) {
+                MediaType mediaType = opt.get();
+                response.setContentType(mediaType.toString());
+                type = "inline";
+            }
+            response.setHeader("Content-Disposition", type + ";filename*=utf8''" + URLEncodeUtil.encode(name));
 
             IoUtil.copy(s3Object.getObjectContent(), response.getOutputStream());
         } catch (IOException e) {

+ 3 - 3
src/main/java/com/github/jfcloud/excel/editor/docdeal/controller/PreviewController.java

@@ -72,9 +72,9 @@ public class PreviewController {
         }
         MediaType mediaType = opt.get();
 
-        //图片
-        if (mediaType.getType().equals("image")) {
-            return "/viewerImg";
+        //图片或视频直接预览
+        if (mediaType.getType().equals("image") || mediaType.getType().equals("video")) {
+            return "redirect:" + downloadUrl;
         }
 
         //文本

+ 0 - 49
src/main/resources/templates/viewerImg.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
-<head>
-  <meta charset="UTF-8">
-  <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <title th:text="${name}">图片</title>
-  <style>
-      body {
-          font-family: 'Helvetica Neue', Arial, sans-serif;
-          margin: 0;
-          padding: 0;
-          background-color: #f8f9fa;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          min-height: 100vh;
-      }
-
-      .container {
-          max-width: 900px;
-          width: 90%;
-          margin: 80px auto;
-          text-align: center;
-      }
-
-      .image-container {
-          background: white;
-          padding: 20px;
-          border-radius: 10px;
-          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-          margin-bottom: 30px;
-      }
-
-      .image-display {
-          max-width: 100%;
-          max-height: 70vh;
-          object-fit: contain;
-          border-radius: 5px;
-      }
-  </style>
-</head>
-<body>
-<div class="container">
-  <div class="image-container">
-    <img class="image-display" th:src="${downloadUrl}">
-  </div>
-</div>
-</body>
-</html>

+ 1 - 34
src/main/resources/templates/viewerTxt.html

@@ -26,39 +26,6 @@
           color: #2c3e50;
           margin-bottom: 10px;
       }
-
-      .file-selector {
-          background: white;
-          padding: 20px;
-          border-radius: 8px;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-          margin-bottom: 20px;
-          text-align: center;
-      }
-
-      input[type="file"] {
-          width: 0.1px;
-          height: 0.1px;
-          opacity: 0;
-          overflow: hidden;
-          position: absolute;
-          z-index: -1;
-      }
-
-      label {
-          display: inline-block;
-          padding: 12px 24px;
-          background: #3498db;
-          color: white;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: background 0.2s;
-      }
-
-      label:hover {
-          background: #2980b9;
-      }
-
       .content-display {
           background: white;
           padding: 20px;
@@ -87,7 +54,7 @@
   <h1 th:text="${name}"></h1>
 </header>
 
-<div class="content-display" id="fileContent" th:text="${content}">
+<div class="content-display" th:text="${content}">
 </div>
 
 <footer>文本文件</footer>