From 2342f0202ec45333669ac15287b00b19bf234805 Mon Sep 17 00:00:00 2001 From: callmeyan Date: Tue, 10 May 2022 09:22:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9B=BE=E7=89=87=E7=9A=84?= =?UTF-8?q?=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../driver/controller/PreviewController.java | 78 +++++++++++++++++++ .../xyz/longicorn/driver/dto/FileItem.java | 11 ++- .../xyz/longicorn/driver/util/ImageUtils.java | 10 ++- web/src/components/file-uploader/Index.vue | 7 +- 4 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 driver/src/main/java/xyz/longicorn/driver/controller/PreviewController.java diff --git a/driver/src/main/java/xyz/longicorn/driver/controller/PreviewController.java b/driver/src/main/java/xyz/longicorn/driver/controller/PreviewController.java new file mode 100644 index 0000000..f5222bc --- /dev/null +++ b/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(); + } +} diff --git a/driver/src/main/java/xyz/longicorn/driver/dto/FileItem.java b/driver/src/main/java/xyz/longicorn/driver/dto/FileItem.java index 54c5de0..2002c5f 100644 --- a/driver/src/main/java/xyz/longicorn/driver/dto/FileItem.java +++ b/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()); } } diff --git a/driver/src/main/java/xyz/longicorn/driver/util/ImageUtils.java b/driver/src/main/java/xyz/longicorn/driver/util/ImageUtils.java index 51859e6..3653a9b 100644 --- a/driver/src/main/java/xyz/longicorn/driver/util/ImageUtils.java +++ b/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 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); } } diff --git a/web/src/components/file-uploader/Index.vue b/web/src/components/file-uploader/Index.vue index 7420f95..d1e5a7e 100644 --- a/web/src/components/file-uploader/Index.vue +++ b/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)