前言
转型 java 开发后入手的第一个项目,写写博客记录一下
该项目使用的是 sping boot + mybatis plus + thymeleaf 项目架构,前后端不分离
编辑器图片上传
公司前端提供的页面里提供了这个富文本编辑器,大概去了解了一下,这是一个个人维护的轻量编辑器。
官方提供了两种上传本地图片的方式:
使用自带接口进行上传,构造好相应的返回数据即可
完全自定义上传图片过程
前端代码
因为本项目的上传图片并不是上传到服务器然后返回完整的图片 URL,所以使用编辑器自带的上传是不太行的;这里考虑的是使用自定义的方式:
页面点击上传图片后,可以获取到图片文件对象,
使用前端的 window.URL.createObjectURL(files[0]) 方法会构建处理一个临时 url 处理
使用编辑器对象为编辑器文本框中进行标签元素添加,此时可以实现图片点击上传后的展示
通过 ajax 发起请求,将文件对象传到后端,存储到 MongoDB 中,返回当前这条数据 id,放到页面元素中
通过编辑器提供的方法取到编辑器中的内容,构建参数,发送到后端,进行数据更新
// 编辑器设置
var E = window.wangEditor
var editor2 = new E('#editor')
// 添加 token
// editor2.customConfig.uploadImgParams = {
// token: token,
// header: header
// }
// 自带方法请求的接口
// editor2.customConfig.uploadImgServer = '/editorimg'
// 图片以 base64 方式展示
// editor2.customConfig.uploadImgShowBase64 = true
// 设置图片大小为 1M
// editor2.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
// 一次上传的图片不能大于 5 张
// editor2.customConfig.uploadImgMaxLength = 5;
// 图片默认名称
// editor2.customConfig.uploadFileName = 'myFile';
// 自定义图片上传
editor2.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// 注意这里 files 中的第 0 个元素才是当前上传的文件对象
// insert 是获取图片 url 后,插入到编辑器的方法
var url = window.URL.createObjectURL(files[0])
var formData = new FormData();
formData.append("files", files[0]);
$.ajax({
type:"POST",
url:"/addimg", //接口请求地址
dataType:'JSON',
contentType:false,
processData: false,
data:formData,
success:function(data){
// 图片的展示,预览 url
// 图片上传成功,获取到 id,放到标签中然后放到页面元素中
success:function(data){
editor2.cmd.do("insertHTML", "<p><img src=" + url + " style='width: 100px; height: 100px;margin-left:10px' class='imgid' id='" + data.id + "'></p>")
error:function () {
console.log("失败")
}
});
}
editor2.create()
// 编辑器设置尾部
提交代码
function toReply() {
// 获取页面文字
let text = editor2.txt.text();
if (text == null || text == "") {
alert("处理回复不能为空");
return false;
}
// 获取所有图片对应的 id
// 页面图片元素集合
let imgids = $(".imgid")
// 判断图片数量
if (imgids.length > 5) {
alert("图片数量不能大于 5 张");
return false;
}
// 构建图片 id 字符串
let imgidstr = "";
for (let i = 0; i < imgids.length; i++) {
let imgid = $(imgids[i]).attr("id");
imgidstr = imgidstr + imgid + "/"
}
// 问题反馈 id
let p_id = $("#p_id").text();
var formdata = {"problemid": p_id, "reply": text, "imgidstr": imgidstr};
console.log("formdata: ", formdata)
$.ajax({
type:"POST",
url:"/problem/update/",
data:formdata,
success:function (data) {
if (data === "success") {
console.log("提交成功");
// 返回这个接口
window.location.href="/problem/list/";
}
if (data === "error") {
alert("提交失败");
window.location.href="/problem/list/";
}
},
error:function (data) {
console.log(data)
}
})
}
后端代码
图片接口
/**
* 上传图片
* @param request
* @param multipartFile
* @param url
* @return
* @throws Exception
*/
@PostMapping(value = "/addimg")
@ResponseBody
public Map<String, Object> getimg(HttpServletRequest request,
@RequestParam( value="files",required=false) MultipartFile multipartFile,
@RequestParam( value="url",required=false)String url) throws Exception{
Map<String, Object> result = new HashMap<>();
String id = null;
try {
// 构建文件对象
File f = new File(multipartFile.getOriginalFilename(), multipartFile.getContentType(), multipartFile.getSize(),
new Binary(multipartFile.getBytes()));
f.setMd5(MD5Util.getMD5(multipartFile.getInputStream()));
// 调用 service 方法进行文件的保存,保存到 MongoDB 中
// 文件以二进制的方式保存在 MongoDB 中,图片的展示会直接取二进制进行展示
fileService.saveFile(f);
id = f.getId();
} catch (IOException | NoSuchAlgorithmException ex) {
ex.printStackTrace();
}
// 构建返回数据,将存在 MongoDB 的数据 id 返回回去,放到页面上,方便进行提交
result.put("state", "success");
result.put("url", url);
result.put("id", id);
return result;
}
操作 MongoDB 代码
yml 配置文件
spring:
data:
mongodb:
uri: mongodb://11.11.11.11:1111/demo
service
public interface FileService {
/**
* 保存文件
* @param File
* @return
*/
File saveFile(File file);
}
Impl
@Service
public class FileServiceImpl implements FileService {
@Autowired
public FileRepository fileRepository;
@Override
public File saveFile(File file) {
return fileRepository.save(file);
}
}
Repository
import org.springframework.data.mongodb.repository.MongoRepository;
import org.springframework.stereotype.Component;
/**
* File 存储库.
*/
// MongoRepository 中封装好了操作 MongoDB 项目的方法
public interface FileRepository extends MongoRepository<File, String> {
}
