前言
在表單資料中,我們可能會遇到頭像、照片等圖檔的上傳等需求,那麼如果表單中包含一個圖檔元素,我們在controller中應該如何接收呢?
正文
在實際的項目中,我們通常都會有專門的圖檔伺服器來存儲圖檔,這裡我們為了簡單,直接使用自己的本地目錄來虛拟一個圖檔路徑,隻要能達到圖檔上傳的目的就行。我們使用tomcat的虛拟目錄來實作:
在tomcat目錄下的conf/server.xml中添加:
<Context docBase="本地目錄" path="/pic" reloadable="false"/>
,配置了如上的虛拟目錄後,通路
http://localhost:8080/pic
就可以通路配置的本地目錄下的圖檔。
要實作檔案上傳,要再pom檔案中添加以下依賴:
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
其次還要再springmvc.xml檔案中配置多媒體解析器:
<!-- 配置多媒體檔案解析器 -->
<!-- 檔案上傳 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 設定上傳檔案的最大尺寸為5MB -->
<property name="maxUploadSize">
<value>5242880</value>
</property>
</bean>
我們在原來的登入頁面的jsp中加入一個檔案上傳的input:
<form action="${pageContext.request.contextPath }/fileupload.action" enctype="multipart/form-data" method="post">
賬号:<input type="text" name="username">
密碼:<input type="password" name="password">
<br/>
自定義日期格式資料測試:
<input type="text" name="texttime" value="<fmt:formatDate value='${texttime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/>
<h3>${data}</h3>
<input type="file" name="picFile">
<input type="submit" value="登入">
</form>
**需要注意的是,如果要使用檔案上傳的功能,form表單必須有一個
enctype="multipart/form-data"
屬性,且表單的送出方式為post,這樣子在點選登入按鈕的時候,表單會送出到背景controller的方法中:
@RequestMapping("/fileupload")
public String uploadPic(MultipartFile picFile, Model model) throws Exception {
//生成新的檔案名
String picName = UUID.randomUUID().toString();
//擴充名
String oriName = picFile.getOriginalFilename();
String extName = oriName.substring(oriName.lastIndexOf("."));
//儲存檔案
picFile.transferTo(new File("F:\\temp\\" + picName + extName));
model.addAttribute("picName", picName + extName);
return "/WEB-INF/jsp/success.jsp";
}
可以看到,在這裡我們如果想要接受頁面的圖檔,要使用MultipartFile這個對象來接收,且屬性名要和前台input的屬性名稱一緻。在這個方法中,我們生成了一個新的檔案名,并将其放在本地目錄下,最後傳回了一個success的jsp頁面,并在model中将新圖檔的名稱攜帶了過去。在success。jsp中是這樣取值的：
<body>
<h1>圖檔儲存成功</h1>
<input type="image" src="/pic/${picName}">
</body>
這裡直接将圖檔名取出來，在一個圖檔input文本框中顯示出來。
圖檔正常顯示，說明我們的檔案上傳成功，而在本地目錄下，也儲存了剛才上傳的圖檔。
總結
在本文中對SpringMVC的圖檔上傳的功能做了一個簡述，在實際的工作中，使用七牛雲等圖檔伺服器将會更加友善的實作圖檔的管理和存儲。
![springMVC實作JSON互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)