kkfileview代理配置,Vue对接kkfileview实现图片word、excel、pdf预览

kkfileview部署

官网:https://kkfileview.keking.cn/zh-cn/docs/production.html
在这里插入图片描述

这个是官网部署网址,这里推荐大家使用docker镜像部署,因为我是直接找运维部署的,所以这里我就不多说明了,主要说下nginx代理配置,以及接入kkfileview实现图片预览和Office系列的预览。

这里可以给大家提供一个银河麒麟v10上面部署的方案,建议使用如下方法的话去找经验丰富的运维,不过对于运维来说比较简单,对于Java开发,就我个人来说难死了。
因为我们服务器是银河麒麟v10,国产芯片(好像是鲲鹏),并且不能连接外网,所以只能离线部署,试了官网上的好多方案,包括一些博客的方案,都不太行,一开始我自己部署,最后实在没办法,找了运维工程师,他也不行,最后实在没办法我们找了一台同样的可以连接外网的服务器,然后把docker镜像下载下来,然后把镜像文件下载下来,传到这台服务器上,可以用。(有同样场景的同仁可以试试这个办法)

kkfileview代理配置

配置文件

Nginx代理的时候因为没有根目录了,我们只能代理到二级目录下:首先在启动的时候需要给kkfileview添加二级目录,我这里是使用docker启动的,可以使用--volume参数把配置文件映射出来,然后修改配置文件,这里找的运维,我是真不会,我是菜鸡。
首先添加二级路径:
在这里插入图片描述
下面base.url也要写上二级路径,前面的就是代理出去的外网地址:
在这里插入图片描述

主要就是上面这两个位置,如果不这么写的话,后面不同格式文件预览会出问题
别的配置大家就根据自己业务需要调整就可以了

Nginx代理

http {# 文件预览(这里是内网ip地址)upstream preview-web {server 192.168.134.23:8012;}server {#文件预览(这里需要带上二级路径)location /preview {proxy_pass http://preview-web/preview;proxy_redirect default;proxy_set_header Host $host;proxy_set_header Referer $http_referer;proxy_set_header Cookie $http_cookie;proxy_set_header X-Real-Ip $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}
}

配置完之后如果生产环境建议使用命令测试启动下,不然搞挂了就尴尬了

# 测试命令
nginx -t
# 启动命令
nginx -s reload

配置完之后可以外网访问下看能不能看到

Vue对接kkfileview实现图片word、excel、pdf预览

对接方式大家参考官方的给出的对接方案就行:
我这里是使用的最新的4.x的版本,所以使用最新的

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

图片的预览

到那时配置了代理之后会出现一些问题,首先:
如果我们的图片是放在文件服务器上或者服务器本地,然后使用nginx代理出来的,或者第三方的oss
那么直接按照上述的方式去接入预览就好了

vue的话需要下载 js-base64

npm install js-base64

随后在需要接入预览的Vue文件中引入:

previewFile : 是文件的url 地址(外网的地址)
vitePreviewUrl: http://127.0.0.1:8012/preview/onlinePreview?url=

<template>
<iframev-if="previewFile.toLowerCase().includes('.png') ||previewFile.toLowerCase().includes('.jpg') ||previewFile.toLowerCase().includes('.jpeg')"class="preview_file"frameborder="0"width="100%":src="vitePreviewUrl + encodeURIComponent(Base64.encode(previewFile))"></iframe>
</template>
<script setup lang="ts">
import { Base64 } from 'js-base64'
</script>

图片的话这样就可以了因为图片是直接请求的图片的url地址返回的的图片展示出来的
在这里插入图片描述

Office系列预览

使用上述的方法对图片的支持是没有问题的,但是对Office系列的文件不太行,首先Office系列的文件他会缓存到kkfileview的本地,然后分解成一张张图片随后返回过来实现预览,所以kkfileview会在服务器去发送请求下载这个office文件,因为我们的文件也是上传在内网一台服务器上的minio文件服务器中,并且内外网做了隔离,只开放一个端口,使用nginx代理出去,所以内网服务器上部署的kkfileview直接访问文件的url地址他是找不到文件的,kkfileview部署在内网,文件url是外网地址,内外网隔离的情况下,就需要把文件url预览地址转化为内网的预览地址,让他去下载缓存。
因此预览office文件的时候需要将文件外网的url地址转化成内网的url地址:

<!--    其他文件    --><iframev-elseclass="preview_file"frameborder="0"width="100%":src="vitePreviewUrl +encodeURIComponent(Base64.encode(previewFile.replace(viteOutUrl, viteInnerUrl)))"></iframe>

使用replace函数直接替换成内网地址,给大家展示一个原理图,没有去研究源码,但是根据请求返回结果和接入时候出现的各种问题,应该大差不差,有问题,大家即时指正。
图片预览
在这里插入图片描述
在这里插入图片描述
文件预览
在这里插入图片描述
在这里插入图片描述

后续有时间研究研究源码可能会更好,如果有不对的地方请大家指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

扩散模型经典问题:训练Diffusion Models的Loss有什么特别之处?

AIGC算法工程师 面试八股文 Diffusion Loss的推导原理?训练Diffusion Models的Loss有什么特别之处?Diffusion Models的Loss下降趋势是什么样的?为什么训练Diffusion Models的Loss会有这样的特征? 目录 Diffusion Loss的推导原理 一般Diffusion Models训练Loss特征 Loss可…

【数据可视化案列】白葡萄酒质量数据的EDA可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

MyBatis 的一级缓存和二级缓存

MyBatis 提供了两种缓存机制&#xff0c;分别是 一级缓存 和 二级缓存。它们可以显著提高数据库操作的性能&#xff0c;通过减少数据库的访问次数&#xff0c;但它们的工作原理、作用范围以及使用方式有所不同。 一、一级缓存 1. 概述 一级缓存是 SqlSession 级别的缓存&…

压缩qcow2镜像带来的性能损失简单分析

本文拟对压缩qcow2镜像所带来的虚拟机性能损失进行简单分析 背景 生产中发现使用压缩镜像启动的虚拟机开机总是会慢一些。 qcow2镜像的压缩方式为&#xff1a;qemu-img convert -p -c -O qcow2 zero_disk.qcow2 compress_disk.qcow2 分析 qemu代码&#xff1a;https://down…

数据结构之栈,队列,树

目录 一.栈 1.栈的概念及结构 2.栈的实现 3.实现讲解 1.初始化栈 2.销毁栈 3.压栈 4.出栈 5.返回栈顶元素 6.返回栈内元素个数 7.判断栈内是否为空 二.队列 1.队列的概念及结构 2.队列的实现 3.实现讲解 1.初始化队列 2.销毁队列 3.单个成员入队列 4.单个成员…

2、C#基于.net framework的应用开发实战编程 - 设计(二、三) - 编程手把手系列文章...

二、设计&#xff1b; 二&#xff0e;三、构建数据库&#xff1b; 此例子使用的是SQLite数据库&#xff0c;所以数据库工具用的SQLiteStudio x64&#xff0c;这个是SQLite专用的数据库设计管理工具&#xff0c;其它的数据库管理工具比如DBeaver的使用请见实战工具系列文章。 1、…

“信任构建”:网上购物商城的用户评价与信誉系统

2 相关技术 2.1 SSM框架介绍 本课题程序开发使用到的框架技术&#xff0c;英文名称缩写是SSM&#xff0c;在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等&#xff0c;作为一个课题程序采用SSH框架也可以&#xff0c;SSM框架也可以&#xff0c;SpringMVC也可以。SSH框架…

云技术基础

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&…

单点Redis所面临的问题及解决方法

1.数据丢失问题 大家可以设想一下这个场景&#xff0c;假如我们现在只有一个Redis&#xff0c;即单点Redis&#xff0c;我们在往Redis中添加数据的时候突然宕机了&#xff0c;那数据怎么办&#xff0c;如果是一条还好&#xff0c;我在敲一遍就行&#xff0c;那我敲了一万行都没…

计算机组成原理的学习笔记(8)-- 指令系统·其一 指令的组成以及数据寻址方式

学习笔记 前言 ​ 本文主要是对于b站尚硅谷的计算机组成原理的学习笔记&#xff0c;仅用于学习交流。 1. 指令 1.1 组成 操作码&#xff08;Opcode&#xff09;&#xff1a;指指令中执行特定操作的部分。地址码&#xff1a;指令中用于指定操作数位置的部分。 1.2 扩展操作…

汇总贴:cocos creator

1 cocoscreator-doc-TS:目录-CSDN博客 访问节点和组件 常用节点和组件接口 创建和销毁节点 加载和切换场景 获取和设置资源 监听和发射事件 节点系统事件 缓动系统&#xff08;cc.tween&#xff09; 使用计时器 使用对象池 使用 TypeScript 脚本 模块化脚本 脚本执行顺序 全局…

RAGFlow 基于深度文档理解构建的开源 RAG引擎 - 安装部署

RAGFlow 基于深度文档理解构建的开源 RAG引擎 - 安装部署 flyfish 1. 确保 vm.max_map_count ≥ 262144 这是指要调整Linux内核参数vm.max_map_count&#xff0c;以确保其值至少为262144。这个参数控制着进程可以映射的最大内存区域数量。对于某些应用程序&#xff08;如Ela…

2024.2 ACM Explainability for Large Language Models: A Survey

Explainability for Large Language Models: A Survey | ACM Transactions on Intelligent Systems and Technology 问题 可解释性问题&#xff1a;大语言模型&#xff08;LLMs&#xff09;内部机制不透明&#xff0c;难以理解其决策过程&#xff0c;如在自然语言处理任务中&…

docker与docker-compose版本对应

1、说明 docker 和 docker-compose 是两个独立但又紧密相关的工具&#xff0c;docker用于管理docker容器&#xff0c;docker-compose用于编排多docker容器应用。了解它们之间的版本对应关系有助于确保在使用 docker-compose 时不会遇到兼容性问题。 2、docker与docker-compos…

【Nginx系列】---Nginx配置tcp转发

参考 Nginx 配置文件&#xff1a; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid;events {worker_connections 1024; }stream {# 第一个服务转发upstream mysqltest {server 172.16.187.142:9000;}server {listen 9000;proxy_pass mysqltest;}…

Micropython RPI-PICO 随记-DS3231和RTC

开发环境 MCU&#xff1a;Pico1&#xff08;无wifi版&#xff09;时钟模块&#xff1a;DS3231使用固件&#xff1a;自编译版本开发环境&#xff1a;MacBook Pro Sonoma 14.5开发工具&#xff1a;Thonny 4.1.6开发语言&#xff1a;MicroPython 1.24.0 知识记录 DS3231是一款高…

SQLSERVER、MYSQL LIKE查询特殊字符和转义字符相同与不同

SQL Server 和 MySQL 都支持 LIKE 操作符进行模式匹配&#xff0c;但它们在处理特殊字符和转义字符方面有一些差异。尽管两者有很多相似之处&#xff0c;但在某些细节上并不完全通用。以下是 SQL Server 和 MySQL 在 LIKE 操作符使用上的比较&#xff1a; 通配符 百分号 %&am…

【动态规划篇】步步带你深入解答成功AC最优包含问题(通俗易懂版)

本篇小鸡汤&#xff1a;待到苦尽甘来时&#xff0c;我给你讲讲来时路。 欢迎拜访&#xff1a;羑悻的小杀马特.-CSDN博客 本篇主题&#xff1a;解答洛谷的最优包含问题 制作日期&#xff1a;2024.12.23 隶属专栏&#xff1a;C/C题海汇总 ​​ 目录 本篇简介&#xff1a; 一动态…

Intent--组件通信

组件通信1 获取子活动的返回值 创建Activity时实现自动注册&#xff01;【Activity必须要注册才能使用】 默认 LinearLayout 布局&#xff0c;注意 xml 中约束布局的使用&#xff1b; 若需要更改 线性布局 只需要将标签更改为 LinearLayout 即可&#xff0c;记得 设置线性布局…

table 表格转成 excell 导出

OK&#xff0c;功能非常简单&#xff0c;但是很实用啊&#xff01; 依赖安装 这里我们需要安装两个依赖&#xff1a; xlsx 和 file-saver&#xff0c;就可以帮助我们实现功能了&#xff01; npm i xlsx file-saver代码参考 导出方法 utils/index.js import * as XLSX from …