springmvc+mybatis 處理圖片(一)：上傳圖片

時間 2020-08-13

標籤 springmvc+mybatis springmvc mybatis 處理圖片上傳欄目 Spring 简体版

原文原文鏈接

一直以爲上傳圖片文件之類的很難，因此最後才處理圖片，發現也並無那麼難，開始正文。javascript

思路：將前臺上傳的file存到MutipartFile類型字段中，再將MulipartFile轉換爲pojo類中的byte[ ]數組，最後存入數據庫longBlob類型字段中
1. 數據庫設計，將圖片newsPic字段類型設置爲longblob或blobcss

2. 準備jar包：commons-fileupload和commons-io，我用的是commons-fileupload-1.3.1.jar和commons-io-2.4.jar，也能夠在這裏下載。
3. 在springmvc-config.xml中進行上傳文件的配置html

<!-- 對上傳文件的配置 -->
<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.jspjava

<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.javaweb

//動態插入新聞
@SelectProvider(type=NewsDynaSqlProvider.class,method="insertNews") void save(News news);

(2) NewsDynaSqlProvider.javaspring

//動態插入
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.javasql

/** * 添加新聞 * @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.javaapache

/** * 處理添加請求 * @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
}

參考：http://www.javashuo.com/article/p-dmnmfezw-cd.html
2、.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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。