富文本框实现多图片上传到文件服务器

程序员文章站 2022-05-29 19:30:05

...

效果图：

富文本框实现多图片上传到文件服务器

先把js引进来

富文本框实现多图片上传到文件服务器

上传图片到服务器说明：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

wangEditor配置的参数其实就是json字符串，包括用这些配置参数中的其中一些参数进行封装，封装成MultipartFile对象。

然后ajax异步发送请求到后端的接口。

其中多图片上传，回调函数接收的返回值对象有要求。

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}

所以先封装一个返回的对象

WangEditorVO

package com.ldgroup.ldtest.thymeleafbootstrap.vo;

import java.lang.reflect.Array;

/**
 * @Description
 * @Author by mocar小师兄
 * @Date 2020/4/15 21:43
 **/
public class WangEditorVO {
    private Integer errno;
    private String[] data;

    public WangEditorVO() {
    }

    public WangEditorVO(Integer errno, String[] data) {
        this.errno = errno;
        this.data = data;
    }

    public Integer getErrno() {
        return errno;
    }

    public void setErrno(Integer errno) {
        this.errno = errno;
    }

    public String[] getData() {
        return data;
    }

    public void setData(String[] data) {
        this.data = data;
    }
}

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本框 demo</title>
    <!--css-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="../static/css/uploadifive.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <!--导航栏-->
    <div class="row" style="height: 100px">
        <div class="col-md-6">
            <ul class="nav nav-pills">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </div>
        <div class="col-md-6">
            <ul class="nav nav-pills" style="float: right">
                <li role="presentation" class="active"><a href="#">登录</a></li>
                <li role="presentation"><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <!--内容-->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <form action="/user/save" method="post" enctype="application/x-www-form-urlencoded">
                <div class="form-group">
                    <label>username</label>
                    <input type="text" class="form-control" id="username" placeholder="UserName">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
                <div id="editor">
                    <p>欢迎使用富文本编辑器<br/>上传图片大小有限制</p>
                    <!--隐藏域,对应数据库字段-->
                    <input type="hidden" id="image" name="image"/>
                </div>
                <input type="submit" id="add">

            </form>

        </div>

        <div class="col-md-2"></div>
    </div>
</div>
<!--jq-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--bootstrap-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.uploadifive.js"></script>
<script src="../static/js/wangEditor.min.js"></script>
<script type="text/javascript">
    $(function () {
        var E = window.wangEditor;
        var editor = new E('#editor');
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'list',  // 列表
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
        ];
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = 'file/uploads_wang';
        editor.customConfig.uploadFileName = 'files';
        // 将图片大小限制为 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        // 限制一次最多上传 10 张图片
        editor.customConfig.uploadImgMaxLength = 10;
        // 将 timeout 时间改为 3s
        editor.customConfig.uploadImgTimeout = 3000;
        editor.customConfig.uploadImgHooks = {
            success: function (xhr, editor, result) {
                //alert(editor.txt.html());
                $("#image").val(editor.txt.html());
            },
        }

        editor.create();

    })
</script>
</body>


</html>

后端代码：

package com.ldgroup.ldtest.thymeleafbootstrap.controller;

import com.ldgroup.ldtest.thymeleafbootstrap.result.Result;
import com.ldgroup.ldtest.thymeleafbootstrap.result.ResultUtil;
import com.ldgroup.ldtest.thymeleafbootstrap.utils.FastDFSClientWrapper;
import com.ldgroup.ldtest.thymeleafbootstrap.vo.WangEditorVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

/**
 * @Description
 * @Author by mocar小师兄
 * @Date 2020/4/14 14:40
 **/
@RestController
@RequestMapping("/file")
public class UploadFileController {
    @Autowired
    private FastDFSClientWrapper fdfs;

    @PostMapping("/uploads_wang")
    public WangEditorVO uploadsWang(MultipartFile[] files) {
        WangEditorVO wangEditorVO = new WangEditorVO();
        if (files == null) {
            wangEditorVO.setErrno(-1);
        }
        String[] pathArr = new String[files.length];
        Boolean isUpload = true;
        for (int i = 0; i < files.length; i++) {
            try {
                String fullPath = fdfs.uploadFile(files[i]);
                pathArr[i] = fullPath;
            } catch (IOException e) {
                e.printStackTrace();
                isUpload=false;
                break;
            }
        }
        if (isUpload){
            wangEditorVO.setErrno(0);
            wangEditorVO.setData(pathArr);
        }else {
            wangEditorVO.setErrno(-1);
        }
        return wangEditorVO;
    }

}