springboot 獲取並儲存檔案
阿新 • • 發佈：2018-12-15
以下給出一種springboot獲取並儲存前端傳遞的檔案的方式：
前端擬採取ajax非同步傳輸FormData，後端擬採取用MultipartFile型別接收並儲存。
先附後端程式碼：
import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.FileOutputStream; import java.io.IOException; @RestController public class UpPic { @PostMapping("/uppic") String uppic(@RequestParam("data") MultipartFile file) { //System.out.println("進入後臺成功"); String pathName = "myURL";//想要儲存檔案的地址 String pname = file.getOriginalFilename();//獲取檔名（包括字尾） pathName += pname; FileOutputStream fos = null; try { fos = new FileOutputStream(pathName); fos.write(file.getBytes()); // 寫入檔案 //System.out.println("檔案上傳成功"); return "檔案上傳成功"; } catch (Exception e) { e.printStackTrace(); return "檔案上傳失敗"; } finally { try { fos.close(); } catch (IOException e) { e.printStackTrace(); } } }
前端程式碼：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title>Title</title> <script th:src="@{../jquery.js}" ></script> <script> function sc(){ var animateimg = $("#f").val(); //獲取上傳的圖片名 帶// var imgarr=animateimg.split('\\'); //分割 var myimg=imgarr[imgarr.length-1]; //去掉 // 獲取圖片名 var houzui = myimg.lastIndexOf('.'); //獲取 . 出現的位置 var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 獲取檔案字尾 var file = $('#f').get(0).files[0]; //獲取上傳的檔案 var fileSize = file.size; //獲取上傳的檔案大小 var maxSize = 1048576; //最大1MB var data = new FormData(); data.append("data",document.getElementById("f").files[0]); $.ajax({ url: "/uppic", type: 'POST', data: data, dataType: 'JSON', cache: false, processData: false, contentType: false }).done(function(ret){ if(ret['isSuccess']){ var result = ''; var result1 = ''; // $("#show").attr('value',+ ret['f'] +); result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100"/>'; result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;"/>'; $('#result').html(result); $('#show').html(result1); layer.msg('上傳成功'); }else{ layer.msg('上傳失敗'); } }); return false; } </script> </head> <body> <form id="form1"> <label>頭像</label> <input type="button" value="上傳圖片" onclick="f.click()" class="btn_mouseout"/><br /> <p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p> </form> <div id="result"></div> </body> </html>
前端程式碼中寫的是“上傳圖片”，但實際上只要小於1m的檔案（不只是圖片）都可以傳輸。