最近要实现一个发布博客功能,涉及到博文中图片的保存与访问了,在博文中图片对应: ![图片描述](图片url)
。由用户上传图片,我们将其保存在 mongodb 数据库中,返回图片的 url 即可显示图片了。
在这里把基本实现步骤整理了一下记录下来
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency>
spring: data: mongodb: uri: mongodb://192.168.56.101:27017/sysblog
import org.bson.types.Binary; @Document public class UploadFile { @Id private String id; private String name; // 文件名 private Date createdTime; // 上传时间 private Binary content; // 文件内容 private String contentType; // 文件类型 private long size; // 文件大小 // getter/setter }
new Binary(byte[] byte)
此处仅演示功能,便不分层等操作。
上传图片后,保存至 mongodb 数据库,并返回图片的访问 url
@Autowired private MongoTemplate mongoTemplate; @PostMapping("/file/uploadImage") @ResponseBody public String uploadImage(@RequestParam(value = "image") MultipartFile file){ if(file.isEmpty()) return JSONResult.build(200, "请选择一张图片", null); // 返回的 JSON 对象,这种类可自己封装 JSONResult jsonResult = null; String fileName = file.getOriginalFilename(); try { UploadFile uploadFile = new UploadFile(); uploadFile.setName(fileName); uploadFile.setCreatedTime(new Date()); uploadFile.setContent(new Binary(file.getBytes())); uploadFile.setContentType(file.getContentType()); uploadFile.setSize(file.getSize()); UploadFile savedFile = mongoTemplate.save(uploadFile); String url = "http://localhost:8080/file/image/"+ savedFile.getId(); jsonResult = JSONResult.build(200, "图片上传成功", url); } catch (IOException e) { e.printStackTrace(); jsonResult = JSONResult.build(500, "图片上传失败", null); } return jsonResult; }
:操作 MongoDB 的类,例如增删改查等。
你也可以创建一个 repository 层接口继承 MongoRepository,类似于 JPA 的操作。
:自己封装的返回 JSON 数据的工具类:
JSONResult(状态码, 信息, 数据);
根据图片 id 获取图片
import org.springframework.http.MediaType; @GetMapping(value = "/file/image/{id}", produces = {MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_PNG_VALUE}) @ResponseBody public byte[] image(@PathVariable String id){ byte[] data = null; UploadFile file = mongoTemplate.findImageById(id, UploadFile.class); if(file != null){ data = file.getContent().getData(); } return data; }
在 markdown 编辑器中插入图片,简直完美: