Spring Boot 會員管理系統之處理檔案上傳功能，spring會員管理系統

Spring Boot 會員管理系統之處理檔案上傳功能，spring會員管理系統

溫馨提示

Spring Boot會員管理系統的中，需要涉及到Spring架構，SpringMVC架構，Hibernate架構，thymeleaf模板引擎。所以，可以學習下這些知識。當然，直接入門的話使用是沒問題，但是，涉及到一些異常和原理的話可能就有些困難。

1. 前端部分

在前端部分addMember.html是通過form表單來提交會員的資訊，其中就包括了圖片上傳功能（這裡涉及了檔案上傳操作），表單部分代碼如下：

<form th:action="@{/admin/addMember}" method="post" enctype="multipart/form-data" id="addMember">              <div class="file-field input-field">                <div class="btn">                  <span>選擇頭像檔案</span>                  <input id="file" type="file" name="iconPath" multiple="" placeholder="選擇檔案" accept="image/*" onchange="changeToop()">                </div>                <div class="file-path-wrapper">                  <!--<input class="file-path validate" type="text" placeholder="Upload one or more files">-->                  <img id="myimg" src="assets/iconPath/common.jpg" class="img-responsive img-thumbnail" style="width: 20%;height: 20%" />                </div>                <!--頭像檔案上傳預覽-->                <script>                  function Id(id){                    return document.getElementById(id);                  }                  function changeToop(){                    var file = Id("file");                    if(file.value===''){                      //設定預設圖片                      Id("myimg").src='assets/iconPath/common.jpg';                    }else{                      preImg("file","myimg");                    }                  }                  //擷取input[file]圖片的url Important                  function getFileUrl(fileId) {                    var url;                    var file = Id(fileId);                    var agent = navigator.userAgent;                    if (agent.indexOf("MSIE")>=1) {                      url = file.value;                    } else if(agent.indexOf("Firefox")>0) {                      url = window.URL.createObjectURL(file.files.item(0));                    } else if(agent.indexOf("Chrome")>0) {                      url = window.URL.createObjectURL(file.files.item(0));                    }                    return url;                  }                  //讀取圖片後預覽                  function preImg(fileId,imgId) {                    var imgPre =Id(imgId);                    imgPre.src = getFileUrl(fileId);                  }                </script>              </div>                            .......                          </form>

這裡有一個注意事項：因為涉及檔案上傳，所以在form中需要加入enctype="multipart/form-data"，而且就是input中的name屬性是與後端中的Controller映射方法的傳入參數名是一一對應的。

2. 後端代碼實現

後端中對於SpringMVC架構可以對於檔案進行處理然後我們可以通過傳入參數的方式來接收檔案

2.1 Controller處理傳入檔案

代碼如下：

@PostMapping("/addMember")  public String addMember(Member member, String gradeName, MultipartFile icon, Map<String, Object> model) {    //處理上傳檔案    try {      if (icon == null)//首先判斷上傳檔案不為null        return "error";      if (icon.getOriginalFilename().equals("")) //如果上傳檔案的原名為空白字串，則證明使用了預設映像        member.setIconPath("/assets/icon/common.jpg"); //設定為我們的預設映像路徑      else        //這裡通過了自己編寫的檔案上傳工具類來處理上傳的MultipartFile，檔案名稱設定為通過UUID產生的字串        member.setIconPath(FileUploadUtil.upload(icon, "/assets/icon/", UUIDRandomUtil.get32UUID()));    } catch (Exception e) {      e.printStackTrace();      return "error";    }        .......        return "addMemberSuccess";  }

2.2 FileUploadUtil工具類儲存檔案

在Controller的MultipartFile檔案傳入後需要進一步，轉變為FIle並且儲存到磁碟當中，所以我分開處理，把Controller的傳入檔案交給FileUploadUtil工具類來處理，具體的代碼如下：

public class FileUploadUtil {  /**   * 上傳檔案   * @param multipartFile multipartFile   * @param prefixPath 首碼路徑，相對於整個項目中的路徑，路徑最前面不用加入“/”   * @param fileName 上傳後的檔案名稱   * @return 上傳後最終的相對路徑+檔案名稱   * @throws Exception 有可能null 指標異常和IO異常   */  public static String upload(MultipartFile multipartFile, String prefixPath, String fileName) throws Exception {    //得出上傳的絕對路徑    String uploadPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() +"/static"+ prefixPath;    File file = new File(uploadPath);    if (!file.exists())      if (file.mkdirs())        System.out.println("成功建立目錄");    //擷取上傳的尾碼名    String suffixName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."));    //建立最終確定的檔案    file = new File(uploadPath+fileName+suffixName);    multipartFile.transferTo(file);    return prefixPath+fileName+suffixName;  }}

上面中的ClassUtils是Spring提供的一個工具類，而調用方法getDefaultClassLoader().getResource("").getPath()是擷取當前項目classpath下的路徑。

以上便是本系統中關於檔案上傳的部分內容，該系統的源碼以上傳GitHub和下載源碼

總結

以上所述是小編給大家介紹的Spring Boot 會員管理系統之處理檔案上傳功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！