1. 程式人生 > 其它 >React生命週期方法(我常用的)

React生命週期方法(我常用的)

技術標籤:筆記

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。實現檔案流的拷貝