wangEditor上传图片问题

1 问题介绍

目前就论国内富文本编辑器有N多种，但是轻量级的wangEditor拥有简约风格、简单易用的特点，深深吸引了我。官网文档地址
压缩版 wangEditor.min.js 链接
未压缩版 wangEditor.js链接注释4197行同样解决问题哦
此版本为wangeditor@4.2.2

如此小巧的好用的富文本编辑器，却让我使用出来了问题，没错，就是上传图片的问题，下面说下我使用出来的问题。

当我上传一张图片时，我的图片名字可以通过editor.config.uploadFileName = 'your-custom-fileName'来指定名称（此代码在官方文档中的上传图片->自定义fileName可以查看，同样我们也可以限制传入图片的数量，不过多介绍，详看官方文档），在使用spring mvc的controller中我们可以指定对应的名称进行接受该图片。

而当我使用wangEditor上传多张图片时，它便会出现错误，原因是源码将你的名字后面默认拼接了一个index，它是从1一次开始递增的，即当你有三招那个图片时，你原本的名字为file的话，当你选中三张图片时，这三张图片的名字依次为file1,file2,file3，此时你在controller接受参数就不太好用了，既然你通过后台的java代码解决不了此类问题，那只能通过js来解决了。

说了这么多，想必大家已经明白我出现的问题和我解决的思路了，那我就从零开始一步一步使用wangEditor了。

2 必要的java代码

2.0 基础配置

担心读者摸不着头脑，才＋的2.0，如果依赖和配置文件已经处理完毕，则2.0可以忽略。

2.0.1 引入依赖

<!-- json的依赖 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.2</version>
</dependency>
<!-- 上传文件 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

2.0.2 mvc.xml

<!-- 配置上传文件的支持 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
</bean>

2.1 封装wangEditorVO类

说必要也是有原因的，首先当我们上传图片后，server会返回一个带有格式的数据（点击官网查看），即{"errno":0,"data":"地址1","地址2","..."}，这就需要我们定义一个wangEditorVO类，用来封装其返回的数据。
代码如下

package com.chao.vo;

public class WangEditorVO {
    private Integer errno;
    private Object data;

    public Integer getErrno() {
        return errno;
    }

    public Object getData() {
        return data;
    }

    public static WangEditorVO success(Object data) {
        WangEditorVO wangEditorVO = new WangEditorVO();
        wangEditorVO.errno = 0;
        wangEditorVO.data = data;
        return wangEditorVO;
    }

    public static WangEditorVO error(Integer errno, Object data) {
        WangEditorVO wangEditorVO = new WangEditorVO();
        wangEditorVO.errno = errno;
        wangEditorVO.data = data;
        return wangEditorVO;
    }
}

2.2 上传图片的代码

既然封装返回的数据格式，那我们前台页面jsp提交的数据到后台controller进行处理，下面是上传文件的controller类，我们需要接受图片，进行存入指定位置（我是以本地磁盘为例，然后存入nginx），如下代码：

package com.chao.controller;

import com.chao.vo.ServerResponse;
import com.chao.vo.WangEditorVO;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.*;

@Controller
@RequestMapping("/file")
public class FileUploadController {

//    private static final String PRODUCT_FILE_PREFIX = "D:\\IO\\shop\\shopImage\\";
//    private static final String SERVER_PREFIX = "http://localhost:8888/";

    @Value("${PRODUCT_FILE_PREFIX}")
    private String PRODUCT_FILE_PREFIX;
    @Value("${SERVER_PREFIX}")
    private String SERVER_PREFIX;

    @PostMapping("/wangUpload")
    @ResponseBody
    public WangEditorVO wangUpload(MultipartFile[] file) throws IOException {
        //当file为空时
        if (file == null || file.length == 0) {
            return WangEditorVO.error(1, "无图片信息");
        }

        //存入数据库的文件地址集合
        List<String> pathList = new ArrayList<>();
        for (MultipartFile multipartFile : file) {
            //获取文件名
            String name = UUID.randomUUID().toString();
            //拼接完整的 存放图片地址，即：D:\\IO\\shop\\shopImage\\文件名.后缀名
            File path = new File(PRODUCT_FILE_PREFIX + name + getSuffix(multipartFile));
            //将图片存放到path路径下
            multipartFile.transferTo(path);
            //拼接完整的 访问图片地址，即：http://localhost:8888/文件名.后缀名
            pathList.add(SERVER_PREFIX + name + getSuffix(multipartFile));
        }

        return WangEditorVO.success(pathList);
    }

    /**
     * 获取文件的后缀名
     *
     * @param multipartFile 上传的文件
     * @return 文件的后缀名
     */
    private String getSuffix(MultipartFile multipartFile) {
        //获取完整的文件名
        String fileName = multipartFile.getOriginalFilename();
        //截取后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
        return fileSuffix;
    }
}

3 解决前台上传图片的问题

前面话说那么多，纯碎是为了铺垫，重点是解决上传图片的问题，解决该问题有两种方式，一种是我们自己定义上传图片推荐，另一种是注释源码的第4197行代码（name = name + (index + 1);），选择第一种方式时，我们先介绍上传单张图片，其次介绍上传多张图片。

3.1 上传单张图片

3.1.1 代码展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试wangEditor</title>
</head>
<body>

<%-- 富文本编辑器 --%>
<div id="details"></div>
<%-- 点击按钮 --%>
<button type="button" id="get-html">点击获取富文本编辑器的内容</button>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#details')

    // 配置 富文本编辑器 上传图片的接口
    editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';
    //设置上传图片http请求参数名，
    editor.config.uploadFileName = 'file';
    // 一次最多上传图片的数量
    editor.config.uploadImgMaxLength = 1;
    //富文本编辑器提示信息
    editor.config.placeholder = '亲，请记得编辑你的内容哦';
    editor.create();


    $('#get-html').click(function () {
        var details = editor.txt.html();
        console.log(details);
    })
</script>
</body>
</html>

3.1.2 效果展示

3.1.3 修改源码，实现多图上传

虽然我们可以上传单张图片，但是我们可以使用上述方式（上传单张图片代码不用变哦）实现上传多张图片，没错，就是修改源码，极力不推荐，但是真的香，wangEditor的js有两个，分别是压缩版的和未压缩版的版本：wangeditor@4.2.2，分别为大家介绍下。

首先是压缩版的，也就是wangEditor.min.js我们只需要用搜索到_.length>1&&(n+=e+1),，将其删除即可。

其次是未压缩版的，即wangEditor.js，我们定位到4197行，将其注释或者删除即可。

虽然说到修改源码，这个对于我们来说很是遥远，也很是极力不推荐的方式，那么究竟是怎么发现这个问题的呢，这还要从下面的多图上传来说明这个问题，我在下面利用官方文档说明的自己实现上传图片，发现我们需要使用到一个FormData的类，它和java中的Map有很大的相似，均以键值对的形式存在，但是FormData可以允许键重复，下面的上传多图就是使用FormData来存储实现的，于是带着好奇心来到wangEditor.js中搜索FormData，马上就明白了，我话不多说，看下图就OK了。

至于wangEditor.min.js的删除源码也很简单了，一个js文件再压缩，其FormData它是不会变的，所以我们只需要删除_.length>1&&(n+=e+1),就OK了。

3.2 上传多张图片

3.2.1 代码展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试wangEditor</title>
</head>
<body>

<%-- 富文本编辑器 --%>
<div id="details"></div>
<%-- 点击按钮 --%>
<button type="button" id="get-html">点击获取富文本编辑器的内容</button>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#details')

    //自己定义上传的方法
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        //创建 FormData 对象来处理数据：键值对的形式，键可以重复
        var formData = new FormData();
        for (var i = 0; i < resultFiles.length; i++) {
            //将表单中的数据取出来，添加到file中
            formData.append("file", resultFiles[i]);
        }
        //使用AJAX上传图片
        $.ajax({
            url: '${pageContext.request.contextPath}/file/wangUpload',
            type: "POST",
            data: formData,
            async: false,//不发送异步请求
            cache: false,//浏览器将不缓存此页面
            //不设置Content-Type时，浏览器的值: application/x-www-form-urlencoded; charset=UTF-8
            //设置contentType: false时，浏览器的值：application/json
            contentType: false,
            processData: false,//我们需要发送DOM信息
            success: function (res) {
                //处理成功后
                if (res.errno == 0) {
                    for (var j = 0; j < res.data.length; j++) {
                        // 上传图片，返回结果，将图片插入到编辑器中
                        insertImgFn(res.data[j]);
                    }
                } else {
                    alert(res.msg);
                    return;
                }
            }
        });
    }
    editor.create();


    $('#get-html').click(function () {
        var details = editor.txt.html();
        console.log(details);
    })
</script>
</body>
</html>

3.2.2 效果展示