1. 前言
之前使用Servlet實現文件（圖片）上傳，並將圖片保存到當前項目的路徑下，在頁面通過img標籤將圖片顯示。但這會出現一個問題：把Tomcat服務器停止後，再啓動，就會發現之前上傳到Tomcat中的圖片全消失了。這是因爲再次啓動Tomcat時，Tomcat會重新部署此項目，那麼之前的項目會被覆蓋掉，所以，上傳的文件會消失，在頁面的img標籤中不能訪問。
所以，把需要上傳的文件不能保存到此項目下，可以保存到其他路徑/磁盤下，即使，Tomcat重啓那也不會影響到上傳的文件。在真實的項目開發中，公司會有專門的文件服務器進行存儲圖片。
由於自己在做畢設時，在上傳文件這塊碰了很多壁，所以，稍加記錄一下。這裏，我就在畢設項目中進行演示。在原項目中添加了兩個Jsp文件—test.jsp和success.jsp
2. DEMO功能描述
在瀏覽器中輸入:http://localhost:8080/test，跳轉到test.jsp頁面。test.jsp頁面就是一個表單提交信息—添加酒店：
- 填寫酒店相應信息，並上傳酒店的圖片。上傳成功後會往數據庫添加一條數據，也會存儲圖片的名稱
- 跳轉到success.jsp，從數據庫讀取酒店的圖片路徑，並顯示。
3. DEMO技術棧
3.1 後臺技術棧
.開發工具：IDEA2018
.開發框架：SSM
.包管理工具:MAVEN
4. DEMO開發流程
IndexController
@Controller
public class IndexController {
@RequestMapping(value = "/test")
public String test() {
return "test";
}
}
跳轉到test.jsp頁面
test.jsp
<body>
<form action="${pageContext.request.contextPath }/addHotel" method="post" enctype="multipart/form-data">
酒店名稱：<input type="text" placeholder="酒店名稱" name="name" /><br>
酒店圖片：<input type="file" name="HotelImage"/><br>
<input type="submit" value="提交" />
</form>
</body>
【注意】：
- enctype=“multipart/form-data”
- 輸入框中的name="HotelImage"要與後臺的MultipartFile 類型的屬性名一致，且不要和實體類Hotel中表示圖片的屬性名相同
addHotel控制器
這裏使用了springmvc技術的文件上傳，所以別忘了，要在springmvc.xml中配置文件上傳
@RequestMapping("/addHotel")
public String addHotel(Hotel hotel, MultipartFile HotelImage, Model model) {
if (HotelImage.getSize() != 0) {
String path = "E:/workspace/project/upload";
String imageName = UploadUtil.upload(HotelImage,path);
hotel.setPic(imageName);
}
hotelService.addHotel(hotel);
model.addAttribute("hotel", hotel);
return "success";
}
這裏的path= “E:/workspace/project/upload” 就是要保存圖片的目錄（用戶可自定義）。即：上傳的圖片都存儲在這個文件夾中。
也在數據庫中存儲了酒店圖片的路徑（圖片名稱）：
upload()
public class UploadUtil {
public static String upload(MultipartFile file, String basePath) {
String uuid = UUID.randomUUID().toString();
String orgFileName = file.getOriginalFilename();
String ext= "." + FilenameUtils.getExtension(orgFileName);
String fileName = uuid + ext;
try {
File targetFile = new File(basePath, fileName);
FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
return fileName;
} catch (IOException e) {
e.printStackTrace();
}
return "";
}
}
這裏是使用了FileUtils.writeByteArrayToFile()進行保存圖片。
配置虛擬目錄
還需要配置虛擬目錄，這樣才能在頁面中訪問，這裏有兩種方法。
想了解詳情，請查看 這篇博客
法1：修改tomcat中的server.xml
設置Tomcat的安裝目錄下E:\Tomcat8\conf\server.xml文件中“host”標籤中添加配置：
<Context path="/upload" docBase="E:/workspace/project/upload" crossContext="true" reloadable="true" debug="0"/>
path：虛擬路徑
docBase：保存圖片的絕對地址
什麼意思呢？
舉例：
訪問docBase指向的文件夾下的一張圖片1.jpg，則這樣訪問：localhost:8080/upload/1.jpg
訪問路徑前需要添加“upload”
法2：使用IDEA工具
選擇需要保存圖片的目錄
添加虛擬目錄
success.jsp
<body>
<img src="/upload/${hotel.pic}" />
</body>
訪問前添加“upload”
配置了虛擬目錄後，無論Tomcat重啓多少次後，還是可以訪問上傳後的圖片的。