springmvc+mybatis 处理图片(一):上传图片

时间:2021-04-19 00:34:09

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

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

springmvc+mybatis 处理图片(一):上传图片

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>

效果如图:

springmvc+mybatis 处理图片(一):上传图片

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

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

springmvc+mybatis 处理图片(一):上传图片
报错如下:

四月 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)

如图:

springmvc+mybatis 处理图片(一):上传图片

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

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

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