springboot+minio+kkfileview实现文件的在线预览

在原来的文章中已经讲述过springboot+minio的开发过程,这里不做讲述。
原文章地址:
https://blog.csdn.net/qq_39990869/article/details/131598884?spm=1001.2014.3001.5501

如果你的项目只是需要在线预览图片或者视频那么可以使用minio自己的预览地址进行,如:
ip+prod/9000/桶名/文件名 即可访问
前提是你需要将你的桶设置为公用的,如果你的桶不是公用的那么你需要看我原来的文章,有一个预览的接口会返回一些凭证,直接将预览接口返回的数据放在浏览器即可访问。

现在的问题是如何我们需要访问的是pdf等文件那么就需要结合kkfileview来实现文件的在线预览。
1.kkfileview安装
这里我是用rancher进行的安装。
在这里插入图片描述
只需要下载最新的或者指定版本的kkfileview镜像即可,并且需要将端口对外映射。

2.访问
搭建完成后只需要输入ip+8012即可访问kkfileview自带的页面。
在这里插入图片描述
可以将上面说的minio的地址输入在这里就可以预览对应的文件了。minio文件地址:ip+prod/9000/桶名/文件名

3.springboot+minio+kkfileview结合预览
前端访问的时候需要访问的地址:
http://ip:8012/onlinePreview?url=
url后面跟的是我们将minio文件地址加密为BASE64后的串,但是有个地方需要注意。
在官网上有说明:
在这里插入图片描述
就是说我们加密的串中如何出现上以上的符合就需要我们进行转义,下面是转义的一个方法。

public  String encodeURIComponent(String s) {
            String result = null;
            try {
                String s1 = s.replaceAll("%", "%25");
                result = URLEncoder.encode(s1, "UTF-8")
                        .replaceAll("\\+", "%2B")
                        .replaceAll(" ", "%20")
                        .replaceAll("/", "%2F")
                        .replaceAll("\\?", "%3F")
                        .replaceAll("#", "%23")
                        .replaceAll("&", "%26")
                        .replaceAll("=", "%3D");
            } catch (UnsupportedEncodingException e) {
                result = s;
            }
            return result;
        }
首先我们需要将需要预览的minio的地址进行拼接,将拼接后的地址转为base64,然后调用上面的公用方法将里面的特殊字符进行转义。
String FileUrl= url+hotelDoc.getContentFileUrl();
String encodedString = Base64.getEncoder().encodeToString(FileUrl.getBytes());
 hotelDoc.setFileUrlBase(encodeURIComponent(encodedString));

这样我们就可以将得到的base64放到url后面即可进行在线预览。
注意点:
如果我们想要用nginx来进行代理那么我们需要将kk中的配置进行修改,我们可以根据环境变量进行修改。
在/opt/kkFileView-4.1.0-SNAPSHOT/config/application.properties文件中有很多的环境变量的配置,这里我们只需要配置两个环境变量即可

KK_BASE_URL和KK_CONTEXT_PATH这两个环境变量。

KK_BASE_URL 这个是写你nginx的ip和端口,这里我是https的。如https://127.0.0.1:6555/preview
KK_CONTEXT_PATH这个是写我们在nginx中配置的路由,这里我写的是/preview

nginx文件中的配置:
location /preview {
proxy_pass http://ip:8012; //kkfileview的ip和端口
}

配置完成后你就可以使用代理去访问了:
https://127.0.0.1:6555/preview/onlinePreview?url=aHR0cDovLzE5MS4x

在这里插入图片描述

官网文档
kkfileview

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是使用 Spring Boot + Vue 实现 KKFileViewMinIO 文件预览的具体操作步骤: 1. 首先,需要安装并启动 MinIO,可以从官网下载并安装对应平台的版本。 2. 创建一个新的 MinIO 存储桶,并将需要预览文件上传到该存储桶中。 3. 使用 Spring Boot 创建一个新的 Web 应用程序,并添加 MinIO 的客户端依赖,如下所示: ```xml <dependency> <groupId>io.minio</groupId> <artifactId>minio</artifactId> <version>6.1.0</version> </dependency> ``` 4. 创建一个 MinIO 客户端实例,并使用该实例获取存储桶中的文件 URL,如下所示: ```java import io.minio.MinioClient; import io.minio.errors.MinioException; public class MinioUtils { private static final String ENDPOINT = "your-minio-endpoint"; private static final String ACCESS_KEY = "your-minio-access-key"; private static final String SECRET_KEY = "your-minio-secret-key"; private static final String BUCKET_NAME = "your-bucket-name"; private static final MinioClient minioClient; static { try { minioClient = new MinioClient(ENDPOINT, ACCESS_KEY, SECRET_KEY); } catch (Exception e) { throw new RuntimeException(e); } } public static String getFileUrl(String fileName) { try { return minioClient.presignedGetObject(BUCKET_NAME, fileName); } catch (Exception e) { throw new RuntimeException(e); } } } ``` 其中,getFileUrl 方法用于获取指定文件MinIO 存储桶中的 URL。 5. 使用 Vue 创建一个新的 Web 界面,并引入 KKFileViewJavaScript 文件,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件预览</title> <script src="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.js"></script> <link href="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 6. 在 Vue 的 app.js 文件中,使用 Axios 获取 MinIO 存储桶中的文件 URL,并将其传递给 KKFileView 进行预览,如下所示: ```javascript import axios from 'axios' import KKFileView from 'kkfileview' new Vue({ el: '#app', created() { axios.get('/getFileUrl?fileName=test.pdf').then((response) => { KKFileView.open(response.data) }) } }) ``` 其中,getFileUrl 接口用于返回指定文件MinIO 存储桶中的 URL,response.data 是从接口返回的 URL。 7. 在 Spring Boot 应用程序中,创建 getFileUrl 接口,用于返回指定文件MinIO 存储桶中的 URL,如下所示: ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController public class FileController { @GetMapping("/getFileUrl") public String getFileUrl(@RequestParam String fileName) { return MinioUtils.getFileUrl(fileName); } } ``` 8. 启动 Spring Boot 应用程序和 Vue Web 界面,访问 Vue Web 界面,即可在线预览 MinIO 存储桶中的文件。 需要注意的是,为了保证文件访问的安全性,需要在 MinIO 中设置适当的访问权限,确保只有授权的用户才能访问存储桶中的文件。同时,KKFileView 也提供了一些安全设置,如设置访问密码等,可以进一步加强文件访问的安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值