使用gitee搭建图床，并解决防盗链问题_gitee图床

使用gitee搭建图床，并解决防盗链问题

一、搭建图床（图床—般是指储存图片的服务器）

1、有gitee账号，并搭建一个gitee仓库

点击新建仓库：

填写信息：

新建完就是这个模样了，点击管理：

把仓库弄成共有的这样大家都可以访问，也就是说你的网站可以不用登录你的gitee账号就可以查看你仓库里面的图片：

设置秘钥：

生成新令牌：记住，保存好，如果忘了，只能再生成一个令牌了

提交：

2、我们了解一下怎么上传图片Gitee API 文档，先不深究，熟悉一下，等会看代码

个人Gitee访问路径：我的就是i-dont-recognize-you，可以在设置—>个人资料—>个人空间地址中修改、查看

文件路径：可带文件夹，可以不创建，会自动创建，如：/img/blue.png 如果img这个文件夹不存在就新建这个文件夹并存入blue.png这个图片，如果存在，就直接找到这个文件夹，在里面存入blue.png这个图片。

3、代码编写

导入hutool的工具包

<!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.5.8</version>
</dependency>
1
2
3
4
5
6

配置类（GiteeImgBed）

package bjwl.jk.zg.limsser.util;

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 配置码云图床
 */
public class GiteeImgBed {
    public static String getNowDate() {
        Date now = new Date();
        SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMdd");
        return formatter.format(now);
    }

    //码云私人令牌，需要补充
    public static final String ACCESS_TOKEN = "";
    //个人空间名，需要补充
    public static final String OWNER = "";
    //仓库名，需要补充
    public static final String REPO_NAME = "";
    //文件夹路径
    public static final String PATH = "/img/" + getNowDate() + "/";
    //message消息
    public static final String ADD_MESSAGE = "add img";
    public static final String DEl_MESSAGE = "del img";

    /**
     * 新建文件请求路径
     * <p>
     * owner*   仓库所属空间地址(企业、组织或个人的地址path)
     * repo*    仓库路径
     * path*    文件的路径
     * content* 文件内容, 要用 base64 编码
     * message* 提交信息
     * <p>
     * %s =>仓库所属空间地址(企业、组织或个人的地址path)  (owner)
     * %s => 仓库路径(repo)
     * %s => 文件的路径(path)
     */
    public static String CREATE_REPOS_URL = "https://gitee.com/api/v5/repos/%s/%s/contents/%s";
    /**
     * 获取路径下所有的内容
     * <p>
     * owner*   仓库所属空间地址(企业、组织或个人的地址path)
     * repo*    仓库路径
     * path*    文件的路径
     * content* 文件内容, 要用 base64 编码
     * message* 提交信息
     * <p>
     * %s =>仓库所属空间地址(企业、组织或个人的地址path)  (owner)
     * %s => 仓库路径(repo)
     * %s => 文件的路径(path)
     */
    public static String GET_IMG_URL = "https://gitee.com/api/v5/repos/%s/%s/contents/%s";

    /**
     * 删除文件请求路径
     * <p>
     * owner*   仓库所属空间地址(企业、组织或个人的地址path)
     * repo*    仓库路径
     * path*    文件的路径
     * content* 文件内容, 要用 base64 编码
     * message* 提交信息
     * <p>
     * %s =>仓库所属空间地址(企业、组织或个人的地址path)  (owner)
     * %s => 仓库路径(repo)
     * %s => 文件的路径(path)
     */
    public static String DEL_IMG_URL = "https://gitee.com/api/v5/repos/%s/%s/contents/%s";
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

控制器：我这里放了一个更新用户头像的逻辑代码，不需要删掉即可

package com.zhao.controller;

import cn.hutool.core.codec.Base64;
import cn.hutool.http.HttpRequest;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import com.zhao.common.R;
import com.zhao.pojo.User;
import com.zhao.service.IUserService;
import com.zhao.utils.GiteeImgBed;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * 上传图床
 */
@RestController
@RequestMapping("/fix/img")
@Transactional(rollbackFor = Exception.class)
public class UploadController {
    @Autowired
    private IUserService userService;

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    /**
     * 上传图片
     * @param file
     * @return
     * @throws Exception
     */
    @PostMapping("uploadImg")
    public R uploadImg(@RequestParam("file") MultipartFile file,@RequestParam("userId") Integer userId) throws Exception {
        User user = new User();
        user.setUserId(userId);
        logger.info("请求成功");
        String originaFileName = file.getOriginalFilename();
        //上传图片不存在时
        if(originaFileName == null){
            return R.Failed("上传图片不存在");
        }
        String suffix = originaFileName.substring(originaFileName.lastIndexOf("."));
        //设置图片名字
        String fileName = System.currentTimeMillis() + "_" + UUID.randomUUID().toString() + suffix;

        String paramImgFile = Base64.encode(file.getBytes());
        //设置转存到Gitee仓库参数
        Map<String, Object> paramMap = new HashMap<>();
        paramMap.put("access_token", GiteeImgBed.ACCESS_TOKEN);
        paramMap.put("message", GiteeImgBed.ADD_MESSAGE);
        paramMap.put("content", paramImgFile);

        //转存文件路径
        String targetDir = GiteeImgBed.PATH + fileName;
        //设置请求路径
        String requestUrl = String.format(GiteeImgBed.CREATE_REPOS_URL, GiteeImgBed.OWNER,
                GiteeImgBed.REPO_NAME, targetDir);
        logger.info("请求Gitee仓库路径:{}",requestUrl);

        String resultJson = HttpUtil.post(requestUrl, paramMap);
        JSONObject jsonObject = JSONUtil.parseObj(resultJson);
        //表示操作失败
        if (jsonObject==null || jsonObject.getObj("commit") == null) {
            return R.Failed("操作失败");
        }
        JSONObject content = JSONUtil.parseObj(jsonObject.getObj("content"));
        
        
        // 图片路径   这个路径记住后面要讲！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
        String img = "https://gitee.com/i-dont-recognize-you/bishe-img/raw/master"+targetDir;
        //修改用户头像
        user.setImage(img);
        userService.updateById(user);
        return R.Success(requestUrl);
    }

    /**
     * 删除图片
     * @param imgPath
     * @return
     * @throws Exception
     */
    @DeleteMapping("/delImg")
    @ResponseBody
    public R delImg(@RequestParam(value = "imgPath") String imgPath) throws Exception {
        //路径不存在不存在时
        if(imgPath == null || "".equals(imgPath.trim())){
            return R.Failed("路径不存");
        }
        String path = imgPath.split("master/")[1];
        //上传图片不存在时
        if(path == null || "".equals(path.trim())){
            return R.Failed("上传图片不存在");
        }
        //设置请求路径
        String requestUrl = String.format(GiteeImgBed.GET_IMG_URL, GiteeImgBed.OWNER,
                GiteeImgBed.REPO_NAME, path);
        logger.info("请求Gitee仓库路径:{}",requestUrl);

        //获取图片所有信息
        String resultJson = HttpUtil.get(requestUrl);

        JSONObject jsonObject = JSONUtil.parseObj(resultJson);
        if (jsonObject == null) {
            logger.error("Gitee服务器未响应,message:{}",jsonObject);
            return R.Failed("Gitee服务器未响应");
        }
        //获取sha,用于删除图片
        String sha = jsonObject.getStr("sha");
        //设置删除请求参数
        Map<String,Object> paramMap = new HashMap<>();
        paramMap.put("access_token", GiteeImgBed.ACCESS_TOKEN);
        paramMap.put("sha", sha);
        paramMap.put("message", GiteeImgBed.DEl_MESSAGE);
        //设置删除路径
        requestUrl = String.format(GiteeImgBed.DEL_IMG_URL, GiteeImgBed.OWNER,
                GiteeImgBed.REPO_NAME, path);
        logger.info("请求Gitee仓库路径:{}",requestUrl);
        //删除文件请求路径
        resultJson = HttpRequest.delete(requestUrl).form(paramMap).execute().body();
        HttpRequest.put(requestUrl).form(paramMap).execute().body();
        jsonObject = JSONUtil.parseObj(resultJson);
		//请求之后的操作
        if(jsonObject.getObj("commit") == null){
            logger.error("Gitee服务器未响应,message:{}",jsonObject);
            return R.Failed("Gitee服务器未响应");
        }
        return R.Success("删除成功");
    }

}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

JSON工具类：SpringBoot的JSON工具类（java），用于前后端分离_java自带json工具_我认不到你的博客-CSDN博客

4、查看图片：跟着点

此图我放最后，需要留着当壁纸的朋友自取

这个路径https://gitee.com/i-dont-recognize-you/bishe-img/raw/master跟后面图片的文件夹+文件名就是完整的URL地址

二、解决防盗链问题

1、要解决这个问题，我们先要知道这是什么，并且为什么需要解决这个问题

防盗链是什么?

防盗链不是一根链条，正确的停顿应该是防、盗链——防止其他网站盗用我的链接。

我把图片上传到gitee的服务器，得到了图片的链接，然后拿着这个链接在第三方编辑器中使用，这就是在“盗用”——因为这张图片占用了gitee的服务器资源，却为第三方编辑器工作，gitee得不到好处，还得多花钱。

如何实现防盗链?

要实现防盗链，就需要知道图片的请求是从哪里发出的。可以实现这一功能的有请求头中的origin和referer。origin只有在XHR请求中才会带上，所以图片资源只能借助referer。其实gitee也确实是这么做的。

通过判断请求的referer，如果请求来源不是本站就返回302，重定向到gitee的logo上，最后在第三方网站引用存在gitee的资源就全变成它的logo了。

可以在开发者工具中看到第三方网站请求gitee图片的流程：

为什么需要解决这个问题？

1、我做毕设或者个人的作品时，我自己的服务器有点小，之前跑了几个服务就有点卡了，而且小编我也没几个钱，不想多买点服务器自己搭，才实习了几个月，白嫖才快乐呀

2、这样我们就可以用别人网站的图片了，岂不美哉，不用维护，gitee稳定，YYDS

解决方案：

1、打个广告，希望大佬们康康，留个小小的赞就行：搭建自己的文件服务器，小编这有两套搭建方案

springboot跨域上传文件（图片）到Linux远程服务器（本地操作也一样）把tomcat作为文件服务器_springboot上传图片到服务器_我认不到你的博客-CSDN博客

使用Docker搭建分布式文件存储系统MinIO_docker minio_我认不到你的博客-CSDN博客

2、使用Nginx做代理

嘿嘿，小编没用过，但所属麻烦了，如果大佬们感兴趣可以自己去搜搜

3、绕过防盗链的防护机制

三种情况下允许引用图片：

1. 本网站。
2. 无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）
3. 授权的网址。

上面讲述了3种可以拿到图片的方法，方法1和3能实现吗？肯定不行，所以我们只能从方法2入手了。

实施：

方法1：使用Vue或者html一样的方式

在html文件中加入<meta name="referrer" content="no-referrer">

在vue中的public文件夹下的index.html文件中

<!DOCTYPE html>
<html>
  <head>
      <!-- 就是这句 屏蔽掉referrer就可以了 -->
    <meta name="referrer" content="no-referrer">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方法2：

可以借助一个chrome小插件：ModHeader （如果你用的是Edge可以点这个链接直接获取），以下图这样设置一下就可以了

图片自取

参考文章：

Vue+Springboot使用Gitee图床上传图片_￡漫步 云端彡的博客-CSDN博客_vue 图床 头像

你已经是个成熟的前端了，应该学会破解防盗链了 - 掘金 (juejin.cn)