基于Spring+SpringMVC+MyBatis开发书评网（十三）后台管理之wangEditor图片上传

Posted 2021-08-27 被雨遗忘的夏天

目录

概要

1、 pom.xml引入依赖

2、 applicationContext激活

3、 后台管理MBookController

4、 前端图书管理功能渲染

---

​​​​​​​

概要

Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费

wangeditor学习网址

1、 pom.xml引入依赖

<!-- Spring MVC文件上传底层依赖 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

2、 applicationContext激活

<!-- 激活Spring MVC 文件上传 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

3、 后台管理MBookController

/**
 * @className: MBookController
 * @author: 李绍宇
 * @description: TODO
 * @date: 2021/7/24 15:03
 * @version: 1.0
 */
@Controller
@RequestMapping("/management/book")
public class MBookController {

    // 图书管理功能
    @GetMapping("/index.html")
    public ModelAndView showBook(){
        return new ModelAndView("/management/book");
    }

    /**
     * wangEditor图片上传
     * @param file 上传图片
     * @param request 原生请求对象
     * @return
     * @throws IOException
     */
    @PostMapping("/upload")
    // JSON序列化输出
    @ResponseBody
    // @RequestParam("img")的img与前端设置的图片上传参数保持一致
    public Map upload(@RequestParam("img") MultipartFile file , HttpServletRequest request) throws IOException {
        // 获取upload目录的路径
        String uploadPath = request.getServletContext().getResource("/").getPath() + "/upload/";
        // 生成文件名
        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
        // 文件扩展名
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        // 保存上传的文件到upload目录
        file.transferTo(new File(uploadPath + fileName + suffix));
        // 返回保存成功的结果给前端
        Map result = new HashMap();
        result.put("errno", 0);
        result.put("data", new String[]{"/upload/" + fileName + suffix});
        return result;
    }

}

4、 前端图书管理功能渲染

//  显示更新图书对话框
    //  obj对应点击的"修改"按钮对象
    function showUpdate(obj){
        //  弹出"编辑图书"对话框
        layui.layer.open({
            //  指定div
            id: "dlgBook",
            //  标题
            title: "编辑图书",
            type: 1,
            //  设置对话框内容,复制自dialog DIV
            content: $('#dialog').html(),
            //  设置对话框宽度高度
            area: ['820px', '730px'],
            resize: false // 是否允许调整尺寸
        })

        //  获取"修改"按钮附带的图书编号
        var bookId = $(obj).data("id");
        //  为表单隐藏域赋值,提交表单时用到
        $("#dlgBook #bookId").val(bookId);

        //  初始化富文本编辑器
        editor = new wangEditor('#dlgBook #editor');
        //  设置图片上传路径
        editor.customConfig.uploadImgServer = '/management/book/upload'
        //  图片上传时的参数名
        editor.customConfig.uploadFileName = 'img';
        editor.create(); // 创建wangEditor
        //  设置当前表单提交时提交至"update"更新地址
        $("#dlgBook #optype").val("update");
        layui.form.render();
        //  发送ajax请求,获取对应图书信息
        $.get("/management/book/id/" + bookId , {} , function(json){
            //  文本框回填已有数据
            //  书名
            $("#dlgBook #bookName").val(json.data.bookName);
            //  子标题
            $("#dlgBook #subTitle").val(json.data.subTitle);
            //  作者
            $("#dlgBook #author").val(json.data.author);
            //  分类选项
            $("#dlgBook #categoryId").val(json.data.categoryId);
            //  设置图文内容
            editor.txt.html(json.data.description);
            //  重新渲染LayUI表单
            layui.form.render();
        } , "json")



    }
    //  显示新增图书对话框
    function showCreate(){
        //   弹出"新增图书"对话框
        layui.layer.open({
            id: "dlgBook",
            title: "新增图书",
            type: 1,
            content: $('#dialog').html(),
            area: ['820px', '730px'],
            resize: false
        })
        //  初始化wangEditor
        editor = new wangEditor('#dlgBook #editor');
        //  设置图片上传地址
        editor.customConfig.uploadImgServer = '/management/book/upload';
        //  设置图片上传参数
        editor.customConfig.uploadFileName = 'img';
        //  创建wangEditor
        editor.create();

        //  LayUI表单重新渲染
        layui.form.render();
        //  设置当前表单提交时提交至"create"新增地址
        $("#dlgBook #optype").val("create");

    };