使用轻量应用服务器搭建图床（整合Typora、PicGo版）

Hi，我是洛言。前几天发布了一篇 “使用轻量应用服务器搭建图床”，链接地址：https://www.codefather.cn/post/1861735277154463745

但是我在使用的时候感觉十分不便：1、这种方式无法通过PicGo上传；2、每次上传图片都需要提交，太麻烦了！

因此就有了这篇文章！

一、在Nginx配置静态资源映射

我们需要通过Nginx设置一个网站，用来展示我们的图片，因为我们刚刚已经通过宝塔安装Nginx，所以在这再设置一个网站：

我们这里设置的图床网站地址为：/www/wwwroot/elitecode：默认创建的文件没有用可以删掉

二、提供API接口

编写API接口

▼
java
复制代码
package cn.luoyan.elitecode.controller;

import cn.hutool.core.date.DateUtil;
import cn.luoyan.elitecode.common.AjaxResult;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.UUID;

/**
 * 文件接口
 */
@RestController
@RequestMapping("/file")
public class ImageUploadController {

    @Value("${file.upload.path}")
    private String uploadPath;
    @Value("${file.upload.subdirectory}")
    private String uploadSubdirectory;

    @Value("${file.access.url}")
    private String accessURL;
    @Value("${file.access.subdirectory}")
    private String accessSubdirectory;

    //上传图片
    @PostMapping("/upload")
    public AjaxResult<String> uploadImg(MultipartFile uploadFile) {
        // 按月份存储，获取存储目录
        String dir = DateUtil.format(new Date(), "yyyy-MM");
        File targetLocation = new File(new File(uploadPath, uploadSubdirectory), dir);
        if (!targetLocation.exists()) {
            targetLocation.mkdirs();
        }
        // 获取上传图片名称
        String originalFilename = uploadFile.getOriginalFilename();
        // 获取文件扩展名
        String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
        // 拼接的图片路径，使用UUID命名避免文件发生覆盖
        String newFileName = UUID.randomUUID().toString() + extName;
        File filePath = new File(targetLocation, newFileName);
        //上传图片
        try {
            uploadFile.transferTo(filePath);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //返回图片访问url
        return AjaxResult.success(accessURL + "/" + accessSubdirectory + "/" + dir + "/" + newFileName);
    }
}

application.yml

▼
yml
复制代码
# 文件相关配置
file:
  upload:
    # 文件上传的根路径
    path: /www/wwwroot/elitecode
    # 文件存储的子目录
    subdirectory: cos
  access:
    # 文件访问的基础URL
    url: https://pic.luo-yan.cn
    # 文件访问URL的子路径
    subdirectory: cos

三、配置反向代理

四、测试

这里使用postman测试

点开返回的图像地址，可以发现图片上传成功

五、整合PicGo

插件官网：https://github.com/yuki-xin/picgo-plugin-web-uploader

下载好release后导入PicGo即可

新建自定义Web图床

图床配置

六、整合Typora

在Typora的偏好设置中进行如图设置即可

随便复制一张图片到md文件，可以看见上传成功，并在md文件中成功显示图片

七、踩坑

最开始我的API返回的URL并没有封装成对象，而是直接返回一个字符串

▼
java
复制代码
//上传图片
@PostMapping("/upload")
public String uploadImg(MultipartFile uploadFile) {
    ....
    //返回图片访问url
    return accessURL + "/" + accessSubdirectory + "/" + dir + "/" + newFileName;
}

当我在md文件中进行测试时，它所显示的格式如下图，多了一个双引号，导致图片无法正确显示

解决办法：将返回的URL封装成JSON对象，此时Typora即可正确解析格式