SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）
说明：
（1）本篇博客内容说明：【在后台系统，我们点击新增按钮后，会弹出新增图书对话框】→【该对话框中，包含一个wangEditor富文本编辑器】→【wangEditor富文本编辑器中，可以包含图片】→【我们点击对话框中的“点击提交”按钮后，会把当前图书的信息给提价到服务器】→【不过，本篇博客，只关心如何把wangEditor中的图片上传到服务器；暂不关心图书信息的其他内容】→【完整图书信息提交，的后端逻辑，将在下篇博客中介绍】；
（2）本篇博客讲到Spring MVC的文件上传：
● Spring MVC在 【后台系统四：【新增】功能；（FileUpload组件）】中介绍的Apache Commons FileUpload组件基础上，做了封装；
● 类似的【有关，表单提交格式、或，上传文件的内容】，以前遇到过两次：在【SSM开发书评网20：把【Kaptcha验证码功能】应用到注册模块上；（遇到了【get请求的url，添加时间戳】，【表单内容序列化】）】中通过【data: $("#frmLogin").serialize()】，把表单的数据给序列化了；serialize()方法是JQuery中的ajax方法，其作用是编码表单元素集为字符串以便提交；；；；；；然后，自己想起了【后台系统四：【新增】功能；（FileUpload组件）】这篇博客；这篇博客主要内容是【提交的表单的时候，涉及到了文件上传】，然后我们通过【enctype="multipart/form-data"】设置表单的编码方式，以便能够上传文件；
目录
一：本篇博客，开发内容说明；
二：前置准备：引入后台首页book.ftl；创建访问入口；观察效果；
1.引入后台管理系统的首页：book.ftl；
2.创建MBookController类，编写访问book.ftl的入口；
3.启动Tomcat，访问后台的图书管理首页，去看下book.ftl；
三：wangEditor官方文档，对【上传图片】的文档说明；
四：正式开发wangEditor的【上传图片】功能；
1.后台管理系统的首页：book.ftl分析；
（1）book.ftl静态页面部分；
（2）book.ftl动态部分；
2.在Spring MVC项目中，配置引入【Common FileUpload组件】，并配置：以使得Spring MVC具备文件上传的能力；
（1）在pom.xml中，引入Common FileUpload组价的依赖；
（2）在applicationContext.xml中配置，激活Spring MVC的文件上传处理功能；
3.在MBookController类中，增加upload()方法，实现wangEditor中图片的上传；
4.启动Tomcat，观察效果；
一：本篇博客，开发内容说明；
在后台管理系统，当我们点击【添加】按钮后，会出现一个【包含wangEditor富文本编辑器的，弹出表单】；当我们点击【立即提交】后，会把图书的信息提交到服务器；
其中，因为wangEditor是富文本编辑器，其中的内容可能是图文混排内容；所以，如何把其中的图片上传到服务器上，是难点；
因此，我们要针对wangEditor，开发与之对应的【图片上传功能】；
二：前置准备：引入后台首页book.ftl；创建访问入口；观察效果；
1.引入后台管理系统的首页：book.ftl；
book.ftl：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>图书管理功能</title><style>#dlgBook{padding: 10px}</style><link rel="stylesheet" href="/resources/layui/css/layui.css"><script src="/resources/wangEditor.min.js"></script><script type="text/html" id="toolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" id="btnAdd" onclick="showCreate()">添加</button></div></script></head> <body><div class="layui-container"><blockquote class="layui-elem-quote">图书列表</blockquote><!-- 数据表格 --><table id="grdBook" lay-filter="grdBook"></table> </div> <!--表单内容--> <div id="dialog" style="padding: 10px;display: none"><form class="layui-form" ><div class="layui-form-item"><!-- 图书类别 --><select id="categoryId" name="categoryId" lay-verify="required" lay-filter="categoryId"><option value=""></option><option value="1">前端</option><option value="2">后端</option><option value="3">测试</option><option value="4">产品</option></select></div><div class="layui-form-item"><!-- 书名 --><input type="text" id="bookName" name="bookName" required lay-verify="required" placeholder="请输入书名"autocomplete="off" class="layui-input"></div><div class="layui-form-item"><!-- 子标题 --><input type="text" id="subTitle" name="subTitle" required lay-verify="required" placeholder="请输入子标题"autocomplete="off" class="layui-input"></div><div class="layui-form-item"><!-- 作者 --><input type="text" id="author" name="author" required lay-verify="required" placeholder="请输入作者信息"autocomplete="off" class="layui-input"></div><div style="margin-top: 30px;font-size: 130%">图书介绍(默认第一图将作为图书封面)</div><div class="layui-form-item" ><!-- wangEditor编辑器 --><div id="editor" style="width: 100%"></div></div><!-- 图书编号 --><input id="bookId" type="hidden"><!-- 当前表单操作类型,create代表新增 update代表修改 --><input id="optype" type="hidden"><div class="layui-form-item" style="text-align: center"><!-- 提交按钮 --><button class="layui-btn" lay-submit="" lay-filter="btnSubmit">立即提交</button></div></form> </div> <script src="/resources/layui/layui.all.js"></script> <script>var table = layui.table; //table数据表格对象var $ = layui.$; //jQueryvar editor = null; //wangEditor富文本编辑器对象//初始化图书列表table.render({elem: '#grdBook' //指定div, id : "bookList" //数据表格id, toolbar: "#toolbar" //指定工具栏,包含新增添加, url: "/management/book/list" //数据接口, page: true //开启分页, cols: [[ //表头{field: 'bookName', title: '书名', width: '300'}, {field: 'subTitle', title: '子标题', width: '200'}, {field: 'author', title: '作者', width: '200'}, {type: 'space', title: '操作', width: '200' , templet : function(d){//为每一行表格数据生成"修改"与"删除"按钮,并附加data-id属性代表图书编号return "<button class='layui-btn layui-btn-sm btn-update' data-id='" + d.bookId + "' data-type='update' onclick='showUpdate(this)'>修改</button>" +"<button class='layui-btn layui-btn-sm btn-delete' data-id='" + d.bookId + "' onclick='showDelete(this)'>删除</button>";}}]]});//显示更新图书对话框//obj对应点击的"修改"按钮对象function showUpdate(obj){//弹出"编辑图书"对话框layui.layer.open({id: "dlgBook", //指定divtitle: "编辑图书", //标题type: 1, content: $('#dialog').html(), //设置对话框内容,复制自dialog DIVarea: ['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$("#dlgBook #optype").val("update"); //设置当前表单提交时提交至"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.form.render();//重新渲染LayUI表单} , "json")}//显示新增图书对话框function showCreate(){//弹出"新增图书"对话框layui.layer.open({id: "dlgBook",title: "新增图书",type: 1,content: $('#dialog').html(),area: ['820px', '730px'],resize: false})//初始化wangEditoreditor = new wangEditor('#dlgBook #editor');editor.customConfig.uploadImgServer = '/management/book/upload';//设置图片上传地址editor.customConfig.uploadFileName = 'img';//设置图片上传参数editor.create();//创建wangEditorlayui.form.render(); //LayUI表单重新$("#dlgBook #optype").val("create");//设置当前表单提交时提交至"create"新增地址};//对话框表单提交layui.form.on('submit(btnSubmit)', function(data){//获取表单数据var formData = data.field;//判断是否包含至少一副图片,默认第一图作为封面显示var description = editor.txt.html();if(description.indexOf("img") == -1){layui.layer.msg('请放置一副图片作为封面');return false;}//获取当前表单要提交的地址//如果是新增数据则提交至create//如果是更新数据则提交至updatevar optype = $("#dlgBook #optype").val();if(optype == "update"){//更新数据时,提交时需要附加图书编号formData.bookId=$("#dlgBook #bookId").val();}//附加图书详细描述的图文htmlformData.description = description;//向服务器发送请求$.post("/management/book/" + optype , formData , function(json){if(json.code=="0"){//处理成功,关闭对话框,刷新列表,提示操作成功layui.layer.closeAll();table.reload('bookList');layui.layer.msg('数据操作成功,图书列表已刷新');}else{//处理失败,提示错误信息layui.layer.msg(json.msg);}} ,"json")return false;});//删除图书function showDelete(obj){//获取当前点击的删除按钮中包含的图书编号var bookId = $(obj).data("id");//利用layui的询问对话框进行确认layui.layer.confirm('确定要执行删除操作吗?', {icon: 3, title:'提示'}, function(index){//确认按钮后发送ajax请求,包含图书编号$.get("/management/book/delete/" + bookId, {}, function (json) {if(json.code=="0"){//删除成功刷新表格table.reload('bookList');//提示操作成功layui.layer.msg('数据操作成功,图书列表已刷新');//关闭对话框layui.layer.close(index);}else{//处理失败,提示错误信息layui.layer.msg(json.msg);}}, "json");});}</script> </body> </html>说明：
（1）这个book.ftl，和前面的【（12）慕课OA系统（Mybatis项目案例，比较重要！）】类似，都是使用LayUI的；
（2）这个前端文件中，很多前端的功能都已经编写了； 我们与之对应的编写后端的功能即可；
（3）book.ftl，就是后台系统的图书管理首页；在book.ftl这一个界面上，我们可以完成对图书信息的增删改查操作；
2.创建MBookController类，编写访问book.ftl的入口；
MBookController：
package com.imooc.reader.controller.management;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView;@Controller @RequestMapping("/management/book") public class MBookController {@GetMapping("/index.html")public ModelAndView showBook() {return new ModelAndView("/management/book");} }说明：
（1）MBookController类说明：
3.启动Tomcat，访问后台的图书管理首页，去看下book.ftl；
当我们点击【添加】按钮后，会弹出【新增图书的对话框】；
三：wangEditor官方文档，对【上传图片】的文档说明；
四：正式开发wangEditor的【上传图片】功能；
1.后台管理系统的首页：book.ftl分析；
（1）book.ftl静态页面部分；
（2）book.ftl动态部分；
通过分析book.ftl，可知wangEditor图片文件上传地址为：【/management/book/upload】 ；即，我们应该在后端编写一个处理wangEditor图片上传的接口，而且该接口的url需要是【/management/book/upload】；
那么，我们在后端就要开发相应的接口；
2.在Spring MVC项目中，配置引入【Common FileUpload组件】，并配置：以使得Spring MVC具备文件上传的能力；
Spring MVC底层文件上传，是依赖于Apache提供的Common FileUpload组价；这部分，需要可以参考 【后台系统四：【新增】功能；（FileUpload组件）】中的内容；
（1）在pom.xml中，引入Common FileUpload组价的依赖；
<!--Common FileUpload组价依赖--><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency>
老生常谈：引入新依赖后，如有需要，别忘了，把这个依赖添加到发布中去；
（2）在applicationContext.xml中配置，激活Spring MVC的文件上传处理功能；
<!--激活Spring MVC的文件上传(FileUpload)处理功能--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="UTF-8"/></bean>
其中设置“defaultEncoding”属性为UTF-8，意思是：在表单提交时，表单内容按UTF-8编码；这可以解决中文乱码问题；
结合 【后台系统四：【新增】功能；（FileUpload组件）】，能够感受到，Spring MVC在前面基础内容的基础上，封装了文件上传功能；
至此，我们在Spring MVC项目中，就引入了FileUpload组件；然后，又因为Spring MVC基于Upload组件等原先的基础知识，作了进一步的封装；
所以，接下来，我们就可以在项目中，去进行文件上传了；
3.在MBookController类中，增加upload()方法，实现wangEditor中图片的上传；
@PostMapping("/upload")@ResponseBodypublic Map upload(@RequestParam("img") MultipartFile file, HttpServletRequest request) throws IOException {//得到图片文件上传目录String uploadPath = request.getServletContext().getResource("/").getPath() + "/upload/";//得到文件名，为了防止文件重名，以当前的毫秒作为文件名String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());//获取原始文件的扩展名String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));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;}说明：
（1）【upload()方法的url】需要和【前端设置的wangEditor的图片提交地址】保持一致；
（2）因为wangEditor，需要后端返回JSON字符串，以说明服务器是否处理成功；所以，upload()的返回值我们定成了Map；
（3）使用MultipartFile接收wangEditor传过来的文件，而且需要设置一些@RequestParam；
（4）在获取图片上传的地址时，需要用到HttpServletRequest原生对象，在参数中写上它；
（5）拼凑图片文件上传地址，并将文件保存到指定的目录下；
transferTo()方法会抛异常，我们继续向上抛就行；
（6）由于wangEditor上传图片时，当我们后端处理完了之后，需要通知wangEditor后台处理成功了；为此，我们需要按照wangEditor的要求，返回结果；
（7）在 【后台系统四：【新增】功能；（FileUpload组件）】中，我们要想上传文件，我们把前端<form>表单的enctype属性，设置为了"multipart/form-data"；；；；与这儿对比一下，能够感受到，Spring MVC在这些久知识上，做了封装；
4.启动Tomcat，观察效果；
而且，查看网页源代码，可以看到图片地址：
自然，在后端的相应地址上，是有这个图片文件的：
说明：
（1）在啰嗦一下，上面的来龙去脉：
自此，新增图书中，比较复杂的wangEditor上传图片就OK了；下篇博客将要完全实现图书的新增功能；
SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）相关推荐
- SSM开发书评网总结
本篇博客是对[SSM开发书评网]的总结&归纳:SSM是真正贴合实际工作的第一个项目:是比较重要的: 说明: (1) 目前觉得,就目前本专栏介绍了的内容来说,真正困难的是[数据库表设计]和[系统 ...
- SSM开发书评网9：项目准备与SSM整合七：项目分析与数据库建表；
说明: (1)本篇博客主要目的:根据项目情况,在分析后,创建数据表: (2)本篇博客介绍的内容虽然不难,但是[当一个新项目过来的时候,要想独立完成本篇的内容,虽然能够完成,但完成质量估计够呛]:所以, ...
- SSM框架之Spring MVC(三）http响应、文件上传
一.响应数据和结果视图 1.1 返回值分类 1.1.1 字符串 创建实体类和controller类 实体类User package cn.xiaomifeng1010.domain;import ja ...
- SSM开发书评网10：项目准备与SSM整合八：Bootstrap入门介绍；
说明: (1)本篇博客的主要内容: ● 引入[项目基础资源],[默认首页index.ftl]: ● 简单介绍了Bootstrap: 对于目前专注于后端开发来说,Bootstrap一般性掌握就行了:做到 ...
- 使用饿了么update组件 实现多文件上传到后台以及本地图片显示功能
使用饿了么update组件 实现多文件上传到后台以及本地图片显示功能 查了很多博客,终于弄出来了.我就大概说一下.我的业务内容是要把一个表单统一上传上去,而且其中有字段也有图片. <div cl ...
- AliP8大牛鼎力推荐Java岗开发进阶实战文档：Spring全家桶+Docker+Redis
微服务最近几年在互联网行业是越来越火热,spring也是程序员不得不掌握的技术点,今天我们就来了解关于微服务中的springcloud.Docker以及spring技术源码解析.深入springboo ...
- 如何将草料二维码收集到的表单信息同步至腾讯文档
在进行工业巡检场景如消防栓检查时,需要到达巡检地点后,扫描草料二维码,然后填写巡检的结果.事后,还需要有一个工作人员将草料二维码中的信息手动复制粘贴至腾讯文档中.那么能不能将我们信息填写后,自动就汇总 ...
- 基于SpringBoot的二手书交易系统的设计与实现（源码、数据库、文档）
作为新兴事物,校园电子商务是,首先是指在校园范围内,其技术手段是校园网,而服务对象是全部师生.主要经营形式为学生自主经营,能够满足多群体生活学习需求,同时具备范围小,安全性高,操作便捷等特点,且可根据 ...
- 基于SSM+Vue的电影售票系统Java电影院票务管理系统电影订票系统（源码调试+讲解+文档）
最新文章
- 解读Go语言的2018：怎么就在中国火成这样了？
- 人工智能浪潮下的语音交互——VUI设计（基础篇）
- 从零开始学python网络爬虫-从零开始学Python网络爬虫 PDF 下载
- linq to object 、linq to sql 、linq to entity 批量 新增、更新、删除功能扩展
- TabLayout和ViewPager
- 网络切片技术缺点_一文读懂网络切片 - 技术综合版块 - 通信人家园 - Powered by C114...
- 有哪些指标可以描述两个图（graph）的相似度？
- 平均聚类系数_Python聚类算法的应用实例
- 电脑经常自动重启的原因
- 淘宝的U盘种类竟然没有京东多？
- 算法学习：最小生成树
- 知到网课教师口语艺术考试题库（含答案）
- c语言车辆管理程序,用c语言编的车辆管理
- 领域平均滤波 matlab,平均值滤波器 - MATLAB Simulink - MathWorks 中国
- ArcEngine合并要素
- 数字信号处理的典型应用
- MATLAB贝茨极限,2014诺贝尔化学奖：突破光学显微极限
- chareter oracle,Oracle数据库的操作程序.pdf-汇文网
- STM32两轮自平衡小车（学习记录）——MPU6050
- python面向对象-2