React生命週期方法(我常用的)
阿新 • • 發佈:2021-02-06
技術標籤:筆記
1.檔案上傳的使用
1.前端程式碼
<form role="form" th:action="@{/upload}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1"> 郵箱</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group" >
<label for="exampleInputPassword1">名字</label>
<input type="text" name="username" class="form-control" id="exampleInputPassword1" placeholder="Password">
< /div>
<div class="form-group">
<label for="exampleInputFile">頭像</label>//單檔案上傳
<input type="file" name="headerImg" id="exampleInputFile">
</div>
<div class="form-group">
<label for="exampleInputFile">生活照</label>//多檔案上傳
<input type="file" name="photos" multiple>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
後端程式碼
/**
* MultipartFile 自動封裝上傳過來的檔案
* @param email
* @param username
* @param headerImg
* @param photos
* @return
*/
@PostMapping("/upload")
public String upload(@RequestParam("email") String email,
@RequestParam("username") String username,
@RequestPart("headerImg") MultipartFile headerImg,
@RequestPart("photos") MultipartFile[] photos) throws IOException {
log.info("上傳的資訊:email={},username={},headerImg={},photos={}",
email,username,headerImg.getSize(),photos.length);
if(!headerImg.isEmpty()){
//儲存到檔案伺服器,OSS伺服器
String originalFilename = headerImg.getOriginalFilename();
headerImg.transferTo(new File("H:\\cache\\"+originalFilename));
}
if(photos.length > 0){
for (MultipartFile photo : photos) {
if(!photo.isEmpty()){
String originalFilename = photo.getOriginalFilename();
photo.transferTo(new File("H:\\cache\\"+originalFilename));
}
}
}
return "main";
}
springboot預設配置了檔案上傳的大小限制,可在配置檔案中進行修改
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=100MB
檔案上傳原理分析
檔案上傳自動配置類-MultipartAutoConfiguration-MultipartProperties • 自動配置好了
StandardServletMultipartResolver 【檔案上傳解析器】 • 原理步驟 •
1、請求進來使用檔案上傳解析器判斷(isMultipart)並封裝(resolveMultipart,返回MultipartHttpServletRequest)檔案上傳請求
• 2、引數解析器來解析請求中的檔案內容封裝成MultipartFile •
3、將request中檔案資訊封裝為一個Map;MultiValueMap<String, MultipartFile>
FileCopyUtils。實現檔案流的拷貝