1. 程式人生 > 程式設計 >springboot上傳圖片檔案步驟詳解

springboot上傳圖片檔案步驟詳解

步驟一:基於前面springboot入門小demo

  基於的springboot入門小demo,已包含了前面文章的知識點(比如:熱部署、全域性異常處理器)。

步驟二:建立uploadPage.jsp上傳頁面  

  在jsp目錄下新建uploadPage.jsp,需要幾點:
  1. method="post" 是必須的
  2. enctype="multipart/form-data" 是必須的,表示提交二進位制檔案
  3. name="file" 是必須的,和後續服務端對應
  4. accept="image/*" 表示只選擇圖片

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>圖片上傳</title>
</head>
<body>
  <form action="upload" method="post" enctype="multipart/form-data">
    選擇圖片:<input type="file" name="file" accept="image/*" /> <br>
    <input type="submit" value="立刻上傳">
  </form>
</body>
</html>

步驟三:建立UploadController.java

  因為uploadPage.jsp在WEB-INF下,不能直接從瀏覽器訪問,所以要在這裡加一個uploadPage跳轉,這樣就可以通過。

  測試訪問頁面:http://127.0.0.1:8080/uploadPage

  訪問到uploadPage.jsp頁面了(只是可以訪問,還不能上傳)。

package cn.xdf.springboot.controller;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class UploadController {
  // 因為uploadPage.jsp 在WEB-INF下,不能直接從瀏覽器訪問,所以要在這裡加一個uploadPage跳轉,這樣就可以通過
  @RequestMapping("/uploadPage")
  public String uploadPage() {
    return "uploadPage";  //過度跳轉頁
  }

  @PostMapping("/upload") // 等價於 @RequestMapping(value = "/upload",method = RequestMethod.POST)
  public String uplaod(HttpServletRequest req,@RequestParam("file") MultipartFile file,Model m) {//1. 接受上傳的檔案 @RequestParam("file") MultipartFile file
    try {
      //2.根據時間戳建立新的檔名,這樣即便是第二次上傳相同名稱的檔案,也不會把第一次的檔案覆蓋了
      String fileName = System.currentTimeMillis() + file.getOriginalFilename();
      //3.通過req.getServletContext().getRealPath("") 獲取當前專案的真實路徑,然後拼接前面的檔名
      String destFileName = req.getServletContext().getRealPath("") + "uploaded" + File.separator + fileName;
      //4.第一次執行的時候,這個檔案所在的目錄往往是不存在的,這裡需要建立一下目錄(建立到了webapp下uploaded資料夾下)
      File destFile = new File(destFileName);
      destFile.getParentFile().mkdirs();
      //5.把瀏覽器上傳的檔案複製到希望的位置
      file.transferTo(destFile);
      //6.把檔名放在model裡,以便後續顯示用
      m.addAttribute("fileName",fileName);
    } catch (FileNotFoundException e) {
      e.printStackTrace();
      return "上傳失敗," + e.getMessage();
    } catch (IOException e) {
      e.printStackTrace();
      return "上傳失敗," + e.getMessage();
    }

    return "showImg";
  }
}

步驟四:建立showImg.jps

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上傳圖片</title>
</head>
<body>
  <img src="/uploaded/${fileName}">
</body>
</html>

  檔案最終上傳到webapp下面的uploaded資料夾下面,如果看不到,就重新整理一哈。

  所以通過這個 <img src="/uploaded/${fileName}"> 連結,就可以訪問到圖片。

步驟五:修改application.properties

  設定上傳檔案的大小,預設是1m,太小了,檔案稍微大一點就會出錯

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=100Mb

步驟六:測試

  訪問測試地址:http://127.0.0.1:8080/uploadPage

springboot上傳圖片檔案步驟詳解

  上傳成功後,跳轉到showImg.jsp訪問圖片資源。

springboot上傳圖片檔案步驟詳解

  (看到美女,就比較精神!!!)

到此這篇關於springboot上傳圖片檔案步驟詳解的文章就介紹到這了,更多相關springboot上傳圖片檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!