一直觉得上传图片文件之类的很难，所以最后才处理图片，发现也并没有那么难，开始正文。

思路：将前台上传的file存到MutipartFile类型字段中，再将MulipartFile转换为pojo类中的byte[ ]数组，最后存入数据库longBlob类型字段中
1. 数据库设计，将图片newsPic字段类型设置为longblob或blob

2. 准备jar包：commons-fileupload和commons-io，我用的是commons-fileupload-1.3.1.jar和commons-io-2.4.jar，也可以在这里下载。 
3. 在springmvc-config.xml中进行上传文件的配置

<!-- 对上传文件的配置 -->

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

    <property name="defaultEncoding">

        <value>UTF-8</value>

    </property>

    <property name="maxUploadSize">

        <value>32505856</value><!-- 上传文件大小限制为31M，31*1024*1024 -->

    </property>

    <property name="maxInMemorySize">

        <value>4096</value>

    </property>

</bean>

form表单里面有文件上传时，必须要指定enctype属性值为multipart/form-data，意思是以二进制流的形式传输文件。否则会报错上传不了。
而因为在form表单中增加了：enctype="multipart/form-data"这个属性，会将数据转换为二进制，导致接收到的值都为空值，因此要在spring的配置文件中配置multipartResolver
4. addNews.jsp

<form action="addNewst" method="post" enctype="multipart/form-data">

    <table>

        <tr>

            <td>

                <input type="file" size="50" name="newsPicture"/>

            </td>

        </tr>

        <!--省略其他字段的代码-->

    </table>

</form>

5. NewsMapper.java和NewsDynaSqlProvider.java
(1) NewsMapper.java

//动态插入新闻

@SelectProvider(type=NewsDynaSqlProvider.class,method="insertNews")

void save(News news);

(2) NewsDynaSqlProvider.java

//动态插入

public String insertNews(final News news){

    return new SQL(){

        {

            INSERT_INTO("news");

            if(news.getNewsTitle() != null && !news.getNewsTitle().equals("")){

                VALUES("newsTitle", "#{newsTitle}");

            }

            if(news.getNewsAbstract() != null && !news.getNewsAbstract().equals("")){

                VALUES("newsAbstract", "#{newsAbstract}");

            }

            if(news.getNewsAuthor() != null && !news.getNewsAuthor().equals("")){

                VALUES("newsAuthor", "#{newsAuthor}");

            }

            if(news.getNewsTime() != null && !news.getNewsTime().equals("")){

                VALUES("newsTime", "#{newsTime}");

            }

            if(news.getNewsContent() != null && !news.getNewsContent().equals("")){

                VALUES("newsContent", "#{newsContent}");

            }

            if(news.getNewsPic() != null && !news.getNewsPic().equals("")){

                VALUES("newsPic", "#{newsPic,jdbcType=BLOB}");

            }

        }

    }.toString();

}

6. TestService.java和TestServiceImpl.java
(1) TestService.java

/**

* 添加新闻

* @param News 新闻对象

* @MultipartFile newsPic 新闻图片

* @throws Exception

*/

void addNewsAndPic(News news, MultipartFile newsPic) throws Exception;

(2) TestServiceImpl.java

@Override

public void addNewsAndPic(News news, MultipartFile newsPic) throws Exception {

    byte[] b1 = newsPic.getBytes();

    news.setNewsPic(b1);

    newsMapper.save(news);

}

7. NewsController.java

/**

 * 处理添加请求

 * @param String flag 标记， 1表示跳转到添加页面，2表示执行添加操作

 * @param News news  要添加的新闻对象

 * @param ModelAndView mv

 * @throws Exception

 * */

@RequestMapping(value="/addNewst")

 public ModelAndView addNewst(String flag, @ModelAttribute News news, MultipartFile newsPicture, ModelAndView mv, HttpSession session) throws Exception{

     if(flag.equals("1")){

         mv.setViewName("addNews");

     }else{

         testService.addNewsAndPic(news, newsPicture);

         mv.setViewName("redirect:/htNews");

     }

     return mv;

 }

SpringMVC中从前台到后台通过表单传递数据：

(1) 表单的name属性值必须和接受的参数同名。否则，接收到的参数为null
(2) 表单的name属性值必须和接收对象的属性同名。否则，接收到的参数为null

8. News.java

public class News implements Serializable{

    private Integer newsID;

    private String newsTitle;

    private String newsAbstract;

    private String newsAuthor;

    @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")

    private Date newsTime;

    private String newsContent;

    private byte[] newsPic;//新闻照片

    public News(){

        super();

    }

    //setter and getter

}

参考：https://blog.csdn.net/j277699931/article/details/50413864
二、.jsp改进，读取input:file的路径后，显示本地图片

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>title</title>

<style type="text/css">

#imagePreview {

width: 160px;

height: 120px;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

}

</style>

</head>

<body>

<form action="addNewst" id="newsForm" method="post" enctype="multipart/form-data">

    <table>

        <tr>

            <td>

                <div id="imagePreview"></div>

                <input id="imageInput" type="file" size="50" name="newsPicture" onchange="loadImageFile()"/>

            </td>

        </tr>

        <!--省略其他代码-->

    </table>

</form>

<script type="text/javascript">

var loadImageFile = (function () {

    if (window.FileReader) {

    var oPreviewImg = null, oFReader = new window.FileReader(),

    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;   

    oFReader.onload = function (oFREvent) {

    if (!oPreviewImg) {

    var newPreview = document.getElementById("imagePreview");

    oPreviewImg = new Image();

    oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";

    oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";

    newPreview.appendChild(oPreviewImg);

    }

    oPreviewImg.src = oFREvent.target.result;

    };   

    return function () {

    var aFiles = document.getElementById("imageInput").files;

    if (aFiles.length === 0) { return; }

    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }

    oFReader.readAsDataURL(aFiles[0]);

    }   

    }

    if (navigator.appName === "Microsoft Internet Explorer") {

    return function () {

    alert(document.getElementById("imageInput").value);

    document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;   

    }

    }

    })();

</script>

</body>

</html>

效果如图：

参考：https://blog.csdn.net/dracotianlong/article/details/38046939

------------------------------------------------------分界线------------------------------------------------------------
遇到的错误：
1. SpringMVC表单提交后，Controller接收到的值都是null，如图


报错如下：

四月 13, 2018 10:43:33 上午 org.apache.catalina.core.StandardWrapperValve invoke

严重: Servlet.service() for servlet [springmvc] in context with path [/SpringDemo] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause

java.lang.NullPointerException

at com.game.controller.NewsController.addNewst(NewsController.java:58)

原因：没有配置multipartResolver，参考：https://blog.csdn.net/MODjie/article/details/79076455

2. 点击”新闻管理“的界面，就在显示图片的controller中报空指针异常java.lang.NullPointerException，但是页面的所有功能都能正常使用，开始始终不明白怎么回事，后来发现是因为有的新闻没有添加图片，造成在加载页面获取新闻的二进制文件流时报空指针异常。

java.lang.NullPointerException

    at java.io.ByteArrayInputStream.<init>(ByteArrayInputStream.java:106)

    at com.game.controller.NewsController.newsPic(NewsController.java:105)

如图：

------------------------------------------------------分界线------------------------------------------------------------

Mysql中的BLOB数据类型
在计算机中，BLOB是数据库中经常用来存储二进制文件的字段类型，典型的BLOB是一张图片或一个声音文件。
MySQL中，BLOB是个类型系列，包括：TinyBlob、Blob、MediumBlob、LongBlob，这几个类型之间的唯一区别是存储文件的最大大小的不同。

类型 大小(单位：字节)
TinyBlob 最大 255
Blob 最大 65K
MediumBlob 最大 16M
LongBlob 最大 4G

springmvc+mybatis 处理图片(一)：上传图片的更多相关文章

  1. springmvc+mybatis 处理图片(二)：显示图片

    数据库及配置文件等参考:springmvc+mybatis 处理图片(一):上传图片思路:把图片二进制信息写入到HttpServletResponse 的outputStream输出流中来显示图片.一 ...

  2. 关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等

     关于CKEditor的一个配置整理,改文件为config.js: 文件内容如下: /** * @license Copyright (c) 2003-2016, CKSource - Frede ...

  3. springmvc+mybatis+spring 整合源码项目

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等 ...

  4. springmvc+mybatis+spring 整合

    获取[下载地址]   [免费支持更新]三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] ...

  5. springmvc+mybatis+spring 整合 bootstrap

    获取[下载地址]   [免费支持更新]三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  7. Spring+SpringMVC+MyBatis深入学习及搭建(十六)——SpringMVC注解开发（高级篇）

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7085268.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十五)——S ...

  8. shiro与Web项目整合-Spring+SpringMVC+Mybatis+Shiro(八)

    Jar包

  9. SSM三大框架整合详细教程（Spring+SpringMVC+MyBatis）【转】

    使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...

随机推荐

  1. 菜鸟vimer成长记——第4.0章、Vim插件管理利器-Vundle

    定义 Vundle是vim bunler和简称,它是一个vim插件管理器. Vim本身缺乏对插件的有效管理,安装插件并配置.vimrc文件非常不便.gmarik受到Ruby的bunler的启发,开发了 ...

  2. STM平台增加性能测试/稳定性测试部分【一】

    前置 我之前写了一个接口自动化平台的,后期因为一个原因删除了. 现在,在此平台的基础上,我又增加了性能/稳定性的功能 它的前端大概是这样: 数据解析: 图表展示: 我将稳定性及性能归与一套方案去编写, ...

  3. Jmeter接口测试（七）用例数据分离

    之前我们的用例数据都是配置在 Jmeter Http 请求中,每次需要增加,修改用例都需要打开 jmeter 重新编辑,当用例越来越多的时候,用例维护起来就越来越麻烦,有没有好的方法来解决这种情况呢? ...

  4. C语言学习之路之基础变量

    Hello,大家好,今天又和大家见面了!前两天,我看到了几款游戏引擎渲染效果的对比的视频,https://www.bilibili.com/video/av5113296?from=search&am ...

  5. 从零开始的Python学习Episode 16——模块

    一.模块 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相 ...

  6. PHP字符编码转换库iconv的一个细节

    先来看代码 <?php $charset = 'GBK'; $str = '中华人民共和国中华人民共和国中华人民共和国中华人民共和国'; ; $str2 = iconv('UTF-8', $ch ...

  7. LEETCODE —— Unique Paths II [Dynamic Programming]

    唯一路径问题II Unique Paths II Follow up for "Unique Paths": Now consider if some obstacles are ...

  8. 慢吞吞的pip切换源

    http://blog.csdn.net/gz_liuyun/article/details/52778198

  9. Daily Scrum 1 --团队项目所需时间估计以及任务分配

    考虑到所有的任务不可能逐一细化分配给成员,我们将需要完成的任务进行了大致的分配.任务所需要的具体实现可以参看<学霸网站NABC> 所需要的总时间一共为44h. 我们会在以后的每日任务中进行 ...

  10. First Blood

    自我介绍 大家好!我的名字是戴俊涵,代号211606359,喜欢看电影和古风音乐,也是一个资深漫迷(让世界感受痛楚吧),喜欢的美食是牛排. 回想初衷 (1)回想一下你初入大学时对本专业的畅想 当初你是 ...