Spring Boot 文章多图上传

一、技术概述

在Spring Boot项目中使用单图或多图上传功能。适用于项目中头像上传、文章多图上传等功能。

二、技术详述

以新增文章的功能为例，新增文章时不仅需要文章标题、内容等信息，还需要多张图片信息。

1. 数据库实现

由于一篇文章对应多张图片，属一对多关系，因此在文章表之外还要额外创建一张文章图片表用以存放。字段设计为 图片id、文章id、图片地址。

2. 创建Controller

@RestController
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @PostMapping(value = "/article")
    public JSONObject addArticle(@RequestParam("title") String title, @RequestParam("imgs") MultipartFile[] imgs) {
        return articleService.addArticle(title, imgs);
    }

}

在Controller中我们使用 MultipartFile[] 这个类型来接收图片文件，使用Post方式，Content-Type为multipart/form-data。

3. 创建articleServiceImpl实现

@Service("articleService")
public class ArticleServiceImpl implements ArticleService {

    @Autowired
    private ArticleDAO articleDAO;

    @Autowired
    private ArticlePictureDAO articlePictureDAO;

    @Value("${uploadPath}")
    private String uploadPath;

    public JSONObject addArticle(String title, MultipartFile[] imgs) {
        //添加文章
        ArticleEntity articleEntity = new ArticleEntity();
        articleEntity.setTitle(title);
        articleEntity = articleDAO.save(articleEntity);
        //上传图片
        if (imgs != null && imgs.length >= 1) {
            for (MultipartFile aimg : imgs) {
                String fileName = aimg.getOriginalFilename();  // 文件名
                String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
                if(!suffixName.equals(".jpg") && !suffixName.equals(".png")){  // 用以判断文件类型
                    System.out.println("文件类型错误！");
                    continue;
                }
                String filePath = uploadPath;  // 上传后的路径
                fileName = java.util.UUID.randomUUID() + suffixName;  // 新文件名
                File dest = new File(filePath + fileName);
                if (!dest.getParentFile().exists()) {  // 不存在目录则创建
                    dest.getParentFile().mkdirs();
                }
                try {
                    aimg.transferTo(dest);
                } catch (IOException e) {
                    e.printStackTrace();
                }
                String filename = articlePicturePath + fileName;
                ArticlePictureEntity articlePictureEntity = new ArticlePictureEntity();
                articlePictureEntity.setAid(articleEntity.getId());
                articlePictureEntity.setPath(filename);
                articlePictureDAO.save(articlePictureEntity);
            }
        }
        ...
    }
}

用较为简单的java.util.UUID来进行文件命名，可以自己定义修改。

4. 自定义图片上传路径

application.properties：

    uploadPath=/home/web/apache-tomcat-9.0.33/webapps/img/

articleServiceImpl.java:

    @Value("${uploadPath}")
    private String uploadPath;

在Spring Boot配置文件application.properties中配置一个变量来使用方便日后修改。

三、问题与解决

1. 图片上传路径问题
   在windows上测试上传路径时要注意java和路径中的“”和“/”的问题（参考博客：路径和JAVA中的 "" 和 "/" 有什么区别）。在windows下测试完要部署至linux服务器时要注意更改路径至linux服务器的路径。在application.properties中配置路径可以免去更改路径的烦恼（其他变量也是如此）。

2. 单图与多图问题
   不论是单图上传还是多图上传，都可以用MultipartFile类型。上面的例子用的是多图上传，单图上传把类型改为MultipartFile[]或把数量限制为1即可。

3. 前后端对接问题
   使用Post方式，Content-Type为multipart/form-data。一些判断文件是否为图片等的判断可与前端交流更改。

四、总结

Spring boot的图片上传较为简单，使用MultipartFile就可以轻松实现，同时也不只局限于图片的上传，其他文件的上传也是同样的道理。

五、参考博客

springBoot+jpa实现图片上传功能，使用MultipartFile接口实现 by ￥诸葛村夫￥
Springboot 将前端传递的图片上传至Linux服务器并返回图片的url（附源码）by Wyx_
SpringBoot 上传图片接口 by 网络改变中国