數據庫存儲圖片路徑并顯示到前端

-為啥不直接存圖片：因為圖片本身太大了，雖然存取方便了程序員，但對數據庫不友好。所以采取存取路徑，再根據路徑解析的方法。

一、數據庫表設計：

從以上思想出發，需要存圖片的表的該列就應該是字符串類型（varchar），存的是圖片路徑（我這里存的是文件名），用字符串拼接方法找到全路徑。

二、Controller怎么處理

這里是存進去（insert）的過程，取出來就是一般操作，獲取數據庫中的路徑，就以String傳到前端。

@RequestMapping("/insertDiary.do")public String insertDiary(MultipartFile file, Diary diary, @ModelAttribute("username") String username) throws IOException {//圖片上傳成功后，將圖片的地址寫到數據庫String filePath = "C:\\Images";//獲取原始圖片的拓展名String originalFilename = file.getOriginalFilename();//新的文件名字String newFileName = new Date().getTime() + originalFilename;//封裝上傳文件位置的全路徑File targetFile = new File(filePath,newFileName);//把本地文件上傳到封裝上傳文件位置的全路徑file.transferTo(targetFile);diary.setStu_username(username);Date date=new Date();java.sql.Date sqlDate=new java.sql.Date(date.getTime());diary.setDiary_time(sqlDate);diary.setAttachment(newFileName);diaryService.insertDiary(diary);return "success";}

重點是以下這段：

String filePath = "C:\\Images";//獲取原始圖片的拓展名String originalFilename = file.getOriginalFilename();//新的文件名字String newFileName = new Date().getTime() + originalFilename;//封裝上傳文件位置的全路徑File targetFile = new File(filePath,newFileName);//把本地文件上傳到封裝上傳文件位置的全路徑file.transferTo(targetFile);

1、C：\\Images 是我自己創建的用于存儲圖片的本地文件夾路徑。
2、重命名文件名：用字符串拼接方法，保留原名（包括拓展名），然后在其前面加上時間戳，形成獨一無二的一長串新文件名。
3、封裝全路徑：將我創建的文件夾名和新文件名一起作為參數傳進File,此時得到的targetFile是一個名為新文件名的file對象。
4、將本地文件上傳到封裝上傳文件位置的全路徑（移植過去）

三、配置

3.1 pom引入文件上傳的兩個包

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.5</version></dependency></dependencies>

3.2 springmvc.xml配置文件上傳解析器

沒有這個是無法用multipart的

<!-- 文件上傳的解析器 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 上傳圖片的最大尺寸 10M--><property name="maxUploadSize" value="10485760"></property><!-- 默認編碼 --><property name="defaultEncoding" value="utf-8"></property></bean>

四、前端提交表單

4.1 存的jsp

form里一定要加上：
enctype="multipart/form-data"
才可以上傳媒體文件！

<form action="${pageContext.request.contextPath}/xxx.do" method="post" enctype="multipart/form-data">

4.2 取的jsp

我是通過jsp中url傳參方式將數據傳到另一個負責顯示的jsp的，所以這里是在jsp先獲取數據，再用<%=%>顯示數據。(att就是傳來的文件名變量）

img標簽下src的路徑很關鍵！！！
【如果直接寫文件的絕對路徑(C:\Images<%=att%>)是無法訪問到的】

原因：因為圖片是存到了本地文件夾，并沒有在項目路徑下，所以運行時直接訪問圖片路徑會404.

解決思路：需要在tomcat下有這個文件呀，至少讓它知道文件路徑在哪->配置虛擬路徑

解決方法：idea的朋友們看這里：

step1：需要在tomcat配置虛擬路徑，映射到本地路徑，才能訪問到。
找到tomcat下的server.xml文件

在標簽內加上這么一句話：

<Context crossContext="true" debug="0" docBase="C:\Images" path="/imgUrl" reloadable="true"/>

docBase是實際的本地路徑
path是供讀取的路徑
即：當讀取到/imgUrl時，就會自動將/imgUrl解析成C:\Images，這樣就可以根據數據庫中的相對路徑來拼接出絕對路徑讀取到圖片。

所以jsp這里src可以直接用/imgUrl

附件：<img src="/imgUrl/<%=att%>"/><br/>

然后切記：重啟tomcat

---

step2：idea需要配置tomcat中的：勾選以下就行。

---

嗯。然后就可以顯示圖片了！！！哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈快樂！！！！！！！！！！！！！！！！！！！

嘿嘿 下一個想搞一下 上傳文件 然后查看的時候可以下載下來的功能。本期就到這里！

---

參考文獻：
ssm框架實現圖片上傳顯示并保存地址到數據庫

IDEA設置虛擬路徑，解決前端展示本地磁盤圖片問題！

總結

以上是生活随笔為你收集整理的数据库存储图片路径并显示到前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。