搭建一个属于自己的图床

发布于

前言

我们在使用Typora进行创作时，文章中的图片可以选择保存到本地或者上传到第三方服务方的图床。

如果图片保存到本地，当我们需要在互联网和别人分享自己创作的内容时，图片是无法显示的，而第三方图床基本上都是收费的。

本文就将跟大家分享下如何搭建一个属于自己的图床，欢迎各位感兴趣的开发者阅读本文。

环境搭建

在typora的偏好配置中，我们切换到图像一栏，如下所示：

image-20210717193829888

  • 图中序号1位置，可以选择插入图片时的行为，点开后我们选择上传图片选项
  • 图中序号2位置，可以选择上传图片时用哪个图床客户端，点开后我们选择uPic选项

安装图床客户端

进入uPic项目的GitHub主页，在Releases页面下载安装包即可。

image-20210717200041404

下载完成，解压后，将其拖拽到 应用程序 文件夹中。

image-20210717200357604

配置客户端

打开应用程序后，会在菜单栏出现一个图标，点击后在出现的选项中，点击“偏好设置”，如下所示：

在打开的界面中，点击左下角的加号，在弹出的选项中点击自定义，如下图所示：

image-20210717201448420

选择自定义后，会出现如下所示的界面：

image-20210717202944353

上传资源所需配置

我们先来降下前4个标注的作用：

  • 序号1标注为上传服务的接口地址
  • 序号2标注为接口的请求方式
  • 序号3标注，接口解析文件流时的字段名
  • 序号4标注为调用上传接口时所需的其他字段，界面如下所示：

image-20210717203729412

注意：我们需要增加一个Header字段，键名为：Content-Type，值为：multipart/form-data; charset=utf-8;。 如果不添加，你的接口则会报错。 body字段则是你调用上传接口时，所需的其它额外参数。

获取资源所需配置

接下来，我们继续看下其他标注的作用：

  • 标注5的值为上传成功后，接口所返回的文件路径地址。例如返回{path:"/uploads/20199afrj.png"}，我们需要取出path的值，这里就需要写["path"]，层级深的话则需要继续向数组中追加元素，详情请移步：URL 获取规则
  • 标注6为获取到上传的文件后，需要进行拼接的域名前缀
  • 配置完成后，我们可以点击验证来看下服务是否正常，如果正常你会看到如下所示的提示：

image-20210717212425413

最后，点击标注7的保存，我们的配置就完成了。

上传服务

上传服务可以使用任何一门后端语言来编写，只要遵循文件上传规范即可，由于后端语言我只会Java，本文就以Java+SpringBoot框架为例，写一段示例代码。

控制层

我们先来看下controller层的代码，如下所示：

代码语言：javascript
复制
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.lk.service.FileUploadService;
import javax.annotation.Resource;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import lombok.extern.slf4j.Slf4j;

@Slf4j

@Controller

// 允许跨域访问

@CrossOrigin()

@RequestMapping("/uploads")

public class FileUploadController {

// 注入文件上传服务

@Resource(name = "FileUploadServiceImpl")

private FileUploadService fileUploadService;


@PostMapping("/singleFileUploadToPath")
@ResponseBody
public Map<String, Object> singleFileUploadToPath(@RequestParam("file") MultipartFile file, @RequestParam("path") String path) throws IOException {
    Map<String, Object> result = new HashMap<>(16);
    // 调用单文件上传接口
    return fileUploadService.singleFileUpload(file, path);
}



}

上述代码中，我们接受两个参数：

  • file：上传过来的文件流
  • path：上传路径名

接口层

接下来，我们来看下service层的代码，如下所示：

代码语言：javascript
复制
import org.springframework.web.multipart.MultipartFile;


// 文件上传接口

public interface FileUploadService {

Map<String, Object> singleFileUpload(MultipartFile file, String path) throws IOException;

}

实现层

最后，我们来看下serviceimpl层的代码，如下所示：

代码语言：javascript
复制
import java.util.Map;

import com.lk.service.FileUploadService;

import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

import java.util.HashMap;

import java.io.File;

import lombok.extern.slf4j.Slf4j;

import org.springframework.stereotype.Service;

import org.springframework.web.multipart.MultipartFile;

import com.lk.utils.UUIDUtil;

import com.lk.utils.DateUtil;

import com.lk.utils.FileUtil;


@Slf4j

@Service("FileUploadServiceImpl")

public class FileUploadServiceImpl implements FileUploadService {

// 从配置文件读取文件路径

@Value("${uploadFilePath}")

private String fileBaseUrl;

@Override

public Map<String, Object> singleFileUpload(MultipartFile file, String path) throws IOException {

return this.writeFile(file, path);

}


private Map&lt;String, Object&gt; writeFile(MultipartFile file, String path) throws IOException {
    String fileType = file.getContentType();
    long fileSize = file.getSize();
    log.info(&#34;[文件类型] - [{}]&#34;, fileType);
    log.info(&#34;[文件名称] - [{}]&#34;, file.getOriginalFilename());
    log.info(&#34;[文件大小] - [{}]&#34;, fileSize);
    // 文件名
    String fileName = file.getOriginalFilename();
    assert fileName != null;
    // 生成文件名
    String finalFileName = UUIDUtil.getUUID()+fileName.substring(fileName.lastIndexOf(&#34;.&#34;));
    // 向客户端推送文件信息
    Map&lt;String, Object&gt; result = new HashMap&lt;&gt;(16);
    if (path.length() != 0) {
        String dayTime = DateUtil.getTimeForDay();
        String writePath = fileBaseUrl + path + &#34;/&#34; + dayTime + &#34;/&#34;;
        // 路径不存在时，则创建
        Boolean touchResult  = FileUtil.touchFolder(writePath);
        if (!touchResult) {
            result.put(&#34;code&#34;, -2);
            result.put(&#34;msg&#34;, &#34;服务器错误: 路径创建失败&#34;);
            log.error(&#34;上传路径创建失败&#34; + writePath);
            return result;
        }
        // 则写入指定路径下
        file.transferTo(new File(writePath + finalFileName));
        result.put(&#34;path&#34;, dayTime + &#34;/&#34; + finalFileName);
    } else {
        // 将文件写入默认路径下
        file.transferTo(new File(fileBaseUrl + finalFileName));
    }
    result.put(&#34;code&#34;, 0);
    result.put(&#34;data&#34;, &#34;上传成功&#34;);
    result.put(&#34;contentType&#34;, file.getContentType());
    result.put(&#34;fileName&#34;, finalFileName);
    result.put(&#34;fileSize&#34;, file.getSize() + &#34;&#34;);
    return result;
}



}

图床客户端请求头配置

上述代码中所列举的上传服务，出了file字段外，还需要传path字段，那么在图床客户端的配置就如下所示：

image-20210717222238001

实现效果

最后，我们来看下配置完成后的效果，如下所示：

1111.gif

写在最后

至此，文章就分享完毕了。

我是神奇的程序员，一位前端开发工程师。

#java#file#image#path#url