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

---

一、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();
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

前端：

<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`
      })

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

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

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;
    }
1
2
3
4
5
6
7
8
9
10

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;
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22