SpringBoot上傳圖片的示例
說明:通常項目中,如果圖片比較多的話,都會把圖片放在專門的服務器上,而不會直接把圖片放在業(yè)務代碼所在的服務器上。下面的例子只是為了學習基本流程,所以放在了本地。
1、單張圖片上傳
1.1、前端用表單提交
前端代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action="/uploads" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="上傳"> </form> </body> </html>
后端代碼;
SimpleDateFormat formatter = new SimpleDateFormat("/yyyy/MM/dd/"); @RequestMapping("/upload") public String fileUpload(MultipartFile file, HttpServletRequest request){ String time = formatter.format(new Date()); //圖片上傳服務器后所在的文件夾 String realPath = request.getServletContext().getRealPath("/img") + time; File folder = new File(realPath); if(!folder.exists()) folder.mkdirs(); //通常需要修改圖片的名字(防止重復) String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID() + oldName.substring(oldName.lastIndexOf(".")); try { //將文件放到目標文件夾 file.transferTo(new File(folder, newName)); //通常還需要返回圖片的URL,為了通用性,需要動態(tài)獲取協(xié)議,不要固定寫死 String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + time + newName; return returnUrl; } catch (IOException e) { e.printStackTrace(); } return null; }
1.2、前端用ajax提交
前端代碼與上面的略有不同,后臺代碼是一樣的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="file" id="file"> <input type="submit" value="上傳" onclick="uploadFile()"> <h1 id="result"></h1> </body> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> function uploadFile() { var file = $("#file")[0].files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ type:"post", url:"/upload", processData:false, contentType:false, data:formData, success:function (msg) { $("#result").html(msg); } }) } </script> </html>
2、多個圖片上傳
前端代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action="/uploads" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="上傳"> </form> </body> </html>
后臺代碼:
@RequestMapping("/uploads") public String fileUploads(MultipartFile[]files, HttpServletRequest request){ String time = formatter.format(new Date()); //圖片上傳服務器后所在的文件夾 String realPath = request.getServletContext().getRealPath("/img") + time; File folder = new File(realPath); if(!folder.exists()) folder.mkdirs(); for (MultipartFile file : files) { //通常需要修改圖片的名字(防止重復) String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID() + oldName.substring(oldName.lastIndexOf(".")); try { //將文件放到目標文件夾 file.transferTo(new File(folder, newName)); //通常還需要返回圖片的URL,為了通用性,需要動態(tài)獲取協(xié)議,不要固定寫死 String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + time + newName; System.out.println(returnUrl); } catch (IOException e) { e.printStackTrace(); } } return null; }
3、問題記錄
在后臺代碼中,有一行需要注意下:
String realPath = request.getServletContext().getRealPath("/img") + time;
需要理解一下realPath究竟指的是什么。剛開始測試的時候,圖片上傳成功后,后臺idea里找不到對應的圖片,然后根據(jù)它返回的realPath,在C盤用戶目錄下的某個文件夾里找到了該圖片(user/AppData/....)。
shift+shift 全局搜索 getCommonDocumentRoot這個方法,點進去,有個靜態(tài)數(shù)組:COMMON_DOC_ROOTS
private static final String[] COMMON_DOC_ROOTS = new String[]{"src/main/webapp", "public", "static"};
發(fā)現(xiàn)默認是指webapp下,或者根目錄下的public、static文件夾(與src并列)。然而這些目錄都沒有,所以Spring定向到了工程目錄以外的一個位置。
于是我在根目錄下新建一個static文件夾,再次上傳,果然有效了。
以上就是SpringBoot上傳圖片的示例的詳細內(nèi)容,更多關于SpringBoot上傳圖片的資料請關注腳本之家其它相關文章!
相關文章
springboot v2.0.3版本多數(shù)據(jù)源配置方法
這篇文章主要介紹了springboot v2.0.3版本多數(shù)據(jù)源配置方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11intellij idea 啟動tomcat 1099端口被占用的解決
這篇文章主要介紹了intellij idea 啟動tomcat 1099端口被占用的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09Java內(nèi)存各部分OOM出現(xiàn)原因及解決方法(必看)
下面小編就為大家?guī)硪黄狫ava內(nèi)存各部分OOM出現(xiàn)原因及解決方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04-
最新評論