实现图片的预览

driver/src/main/java/xyz/longicorn/driver/controller/PreviewController.java

@@ -0,0 +1,78 @@
+package xyz.longicorn.driver.controller;
+
+import lombok.SneakyThrows;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import xyz.longicorn.driver.pojo.FileInfo;
+import xyz.longicorn.driver.service.FileService;
+import xyz.longicorn.driver.util.ImageUtils;
+
+import javax.annotation.Resource;
+import javax.servlet.ServletOutputStream;
+import javax.servlet.http.HttpServletResponse;
+import java.io.FileInputStream;
+
+// 根据文件生成预览
+@Controller
+@RestController
+public class PreviewController {
+    @Resource
+    private FileService fileService;
+
+    // 生成缩略图
+    @SneakyThrows
+    @RequestMapping("/thumb")
+    public void thumb(HttpServletResponse resp, String hash) {
+        String path = this.preHandle(resp, hash); // 获取要处理的图片路径
+        if (path == null) return;
+        // 设置输出头
+        resp.addHeader("Content-Type", "image/jpeg");
+        ImageUtils.getPreview(path, resp.getOutputStream());
+    }
+
+    // 生成预览图
+    @SneakyThrows
+    @RequestMapping("/preview")
+    public void preview(HttpServletResponse resp, String hash) {
+        String path = this.preHandle(resp, hash);
+        if (path == null) return;
+
+        final ServletOutputStream os = resp.getOutputStream(); // 获取网络输出流
+        FileInputStream is = new FileInputStream(path); // 获取文件输入流
+
+        byte[] bytes = new byte[10240];
+        int len;
+        while ((len = is.read(bytes)) != -1) {
+            os.write(bytes, 0, len);
+        }
+        os.close();
+        is.close();
+
+    }
+
+    /**
+     * 通过hash获取图片的真是路径
+     * @param resp
+     * @param hash
+     * @return
+     */
+    @SneakyThrows
+    private String preHandle(HttpServletResponse resp, String hash) {
+        FileInfo info = fileService.getByMd5(hash); // 查询文件信息
+        if (null == info) { // 文件不存在
+            resp.getWriter().println("file not found!");
+            return null;
+        }
+        if (!ImageUtils.isImage(info.getType())) { //判断是否是图片
+            resp.getWriter().println("file can not preview!");
+            return null;
+        }
+        if (info.getPath().startsWith("http")) {
+            // 远程文件直接跳转
+            resp.sendRedirect(info.getPath());
+            return null;
+        }
+        return info.getPath();
+    }
+}

driver/src/main/java/xyz/longicorn/driver/dto/FileItem.java

@@ -22,8 +22,9 @@ import java.util.List;
 public class FileItem {
     private Long id;
     private String name;
-    private Integer size;
+    private Long size;
     private String path;
+    private String thumb;
     private Date createTime;
     private Date updateTime;
     private String type;
@@ -39,7 +40,7 @@ public class FileItem {
                 .setCreateTime(f.getCreateTime())
                 .setId(f.getId())
                 .setName(f.getName())
-                .setSize(0)
+                .setSize(0l)
                 .setType("folder")
                 .setPath(f.getPath())
                 .setUpdateTime(f.getUpdateTime());
@@ -53,6 +54,7 @@ public class FileItem {
 
     /**
      * 将文件转成fileItem
+     *
      * @param f
      * @return
      */
@@ -63,7 +65,10 @@ public class FileItem {
                 .setName(f.getName())
                 .setSize(f.getSize())
                 .setType(f.getType())
-                .setPath(f.getPath())
+//                .setPath(f.getPath())
+//                .setThumb(f.getPath())
+                .setPath("http://localhost:8080/preview?hash=" + f.getHash())
+                .setThumb("http://localhost:8080/thumb?hash=" + f.getHash())
                 .setUpdateTime(f.getUpdateTime());
     }
 }

driver/src/main/java/xyz/longicorn/driver/util/ImageUtils.java

@@ -12,6 +12,11 @@ import java.util.List;
 public class ImageUtils {
     private static final List<String> imageTypes = Arrays.asList("png", "jpg", "jpeg", "gif", "bmp", "webp");
 
+    /**
+     * 根据类型判断是否是图片
+     * @param type
+     * @return
+     */
     public static boolean isImage(String type) {
         return imageTypes.contains(type.toLowerCase());
     }
@@ -19,7 +24,8 @@ public class ImageUtils {
     @SneakyThrows
     public static void getPreview(String imagePath, OutputStream os) {
         Thumbnails.of(new File(imagePath))
-                .size(256, 256)
-                .outputFormat("jpg").toOutputStream(os);
+                .size(256, 256) // 尺寸 256x256
+                .outputFormat("jpg") // 格式
+                .toOutputStream(os);
     }
 }

web/src/components/file-uploader/Index.vue

@@ -125,10 +125,6 @@ export default {
             // 当选择文件夹完成后
             this.add(this.$refs.fileDirectory.files)
         },
-        handleFileInput(files) {
-            this.showUploadList = true;
-            this.$refs.upload.active = true
-        },
         removeFile(file) {
             const index = this.fileListData.indexOf(file);// 获取到要删除的下表
             this.fileListData.splice(index, 1)
@@ -141,6 +137,7 @@ export default {
                     file,
                     name: file.name,
                     status: FileStatus.Ready,
+                    folder:this.currentFolder, // 随当前文件选择的目录
                     progress: 0,
                 })
             })
@@ -156,7 +153,7 @@ export default {
         },
         uploadFile(f) {
             f.status = FileStatus.Uploading;
-            api.upload(this.currentFolder, f.file, (p) => {
+            api.upload(f.folder, f.file, (p) => {
                 f.progress = p.progress
             }).then(ret => {
                 console.log(ret)