一、minio图片服务器

拥有两个端口号，一个时web端控制台端口号，一个是上传时使用的端口号
在后端配置的是内网地址，直接使用minio返回的url进行展示的话，外网无法正常展示

二、图片展示

1.方法一：后端转发

代码如下（示例）：
后端：

public void getImage(String bucketName, String fileName, HttpServletResponse response) throws IOException {InputStream in = null;try {in = minioClient.getObject(GetObjectArgs.builder().bucket(bucketName).object(fileName).build());} catch (Exception e) {e.printStackTrace();}if (in == null){response.sendError(404, "未能找到图片");}//图片类型String[] fileArr = fileName.split("\\.");String contentType = "";StringBuilder originalFileName = new StringBuilder();if (fileArr.length > 1){contentType = "image/" + fileArr[fileArr.length - 1];for (int i = 0; i < fileArr.length - 1; i++) {originalFileName.append(fileArr[i]);if (i != fileArr.length - 2){originalFileName.append(".");}}}else {contentType = "application/octet-stream";originalFileName = new StringBuilder(fileName);}try {response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");response.addHeader("X-Original-File-Name", originalFileName.toString());response.setContentType(contentType);ServletOutputStream outputStream = response.getOutputStream();IOUtil.copyCompletely(in, outputStream);outputStream.flush();outputStream.close();} catch (IOException e) {e.printStackTrace();}}

前端：

<img v-for="picture in picturesSrc":src="picture"alt="图片"style="width: 40px; height: 40px; display: inline-block; border-radius: 4px"v-on:click="showPicture(picture)"/>......this.picturesSrc = JSON.parse(row.fileName).map(fileName => {let encodeUrl = encodeURIComponent(fileName);return `${this.$config.baseUrl}/getImage?fileName=${encodeUrl}&bucketName=test`})

注意：这里之前写好的接口返回了图片名称，图片名称可能存在特殊字符，所以进行了加码处理

2.方法二：nginx代理

public List<String> getNginxObjectUrlByList(String bucketName, String fileNameList) {List<String> fileNames = JSON.parseArray(fileNameList, String.class);List<String> urlList =  new ArrayList<>();fileNames.forEach(res ->{urlList.add(getObjectUrl(bucketName, res).replace("内网地址+minio端口号", "外网地址/minio"));});return urlList;}

server {listen   80;location ^~ /minio/ {proxy_read_timeout 600s;#这里一开始用了127.0.0.1不好用，没看原因proxy_pass http://内网地址+minio端口号;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header X-Special-Delivery "";proxy_set_header Access-Control-Allow-Origin "";proxy_set_header Proxy-Client-IP $remote_addr;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;add_header X-Special-Delivery "stop-polling-our-interface-you-bitch" always;add_header Access-Control-Allow-Origin "you-poll-your-mama-blyat" always;}}

minio图片展示（minio图片上传地址为内网，展示时为外网）相关推荐

MinIO基本使用（实现上传、下载功能）
MinIO基本使用(实现上传.下载功能) 1.简介 2.下载和安装 3.启动服务端 4.创建User和Bucket 4.1 创建User 4.1.1 生成accessKey和secretKey 4.2 ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
【OSS】图片加水印与上传
图片加水印与上传一.效果图 1.未添加水印图 2.添加水印效果图二.需求场景三.加水印 1. 图片上设置水印,字体如何设置? 2.图片有大有小,如何使水印大小自适应 3.水印位置如何设置 4.图 ...
图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤导包 <dependency><gr ...
H5图片预览及上传（WEB前端）
H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧. 一.html布局文件 html有一个自己的上传文件控件- ...
图片服务器上图片的管理网站上传与前台显示
图片服务器上图片的管理网站上传与前台显示代码简介: 很实用的一个图片上传得例子图片上传:生成缩略图加文字水印图片水印 51aspx.png为水印图片远程图片抓取(保存到本地)支持jpg.g ...
图片和视频的上传（文件上传通用）
流程如下: 1.先引入el-upload 2.调用上传前事件 3.上传前事件中将file文件转formData 4.调用后端oss接口上传文件 5.上传完成后回显数据 6.点击图片/视频预览图片和视 ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...

minio图片展示（minio图片上传地址为内网，展示时为外网）

minio图片展示

一、minio图片服务器

二、图片展示

1.方法一：后端转发

2.方法二：nginx代理

minio图片展示（minio图片上传地址为内网，展示时为外网）相关推荐

最新文章

热门文章