Java 开发笔记 - wangEditor 编辑器图片上传

Java 开发笔记 - wangEditor 编辑器图片上传

前言

转型 java 开发后入手的第一个项目，写写博客记录一下

该项目使用的是 sping boot + mybatis plus + thymeleaf 项目架构，前后端不分离

编辑器图片上传

公司前端提供的页面里提供了这个富文本编辑器，大概去了解了一下，这是一个个人维护的轻量编辑器。

• 官网：www.wangEditor.com
• 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
• 上传图片到服务器官方文档地址：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

官方提供了两种上传本地图片的方式：

1. 使用自带接口进行上传，构造好相应的返回数据即可
2. 完全自定义上传图片过程

前端代码

因为本项目的上传图片并不是上传到服务器然后返回完整的图片 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> {
}