파일 업로드

2가지 폼방식

• HTML Form을 통한 파일 업로드를 이해하려면 폼을 전송하는 2가지 방법을 알아야한다.

  • 1. application/x-www-form-urlencoded
    • HTML 폼 데이터를 서버로 전송하는 가장 기본적인 방법이다.
    • Form 태그에 별도의 enctype 옵션이 없으면 웹 브라우저는 요청 HTTP 메시지의 헤더에 Content-Type: application/x-www-form-urlencoded 를 추가해 주면 된다.
    • 폼에 입력한 전송할 항목을 HTTP Body에 문자로 username=kim&age=20 와 같이 & 로 구분해서 전송한다.
  • 2. multipart/form-data
    • 파일은 문자가 아니라 바이너리 데이터를 전송해야 하기 때문에 application/x-www-form-urlencoded 방식으로는 처리할 수 없다.
    • 폼을 전송할 때 한가지 타입으로 전송하지 않기때문에 더더욱 multipart/form-data 방식이 필요하다.

- 위와 같이 multipart/form-data 방식은 다른 종류의 여러 파일과 폼의 내용 함께 전송할 수 있다. 
- Content- Disposition 이라는 항목별 헤더가 추가되어 있고 여기에 부가 정보가 있다.

서블릿을 통한 파일업로드

• 서블릿을 이용해서 파일업로드를 구현하면 아래와 같다.

    @Slf4j
    @Controller
    @RequestMapping("/servlet/v1")
    public class ServletUploadControllerV1 {

        @GetMapping("/upload")
        public String newFile() {
            return "upload-form";
        }

        @PostMapping("/upload")
        public String saveFileV1(HttpServletRequest request) throws ServletException, IOException {
            log.info("request={}", request);

            String itemName = request.getParameter("itemName");
            log.info("itemName={}", itemName);

            Collection<Part> parts = request.getParts();
            log.info("parts={}", parts);

            return "upload-form";
        } 
    }   

• request.getParts() 을 통해서 multipart/form-data 전송 방식에서 각각 나누어진 부분을 받아서 확인할 수 있다.
• properties에 logging.level.org.apache.coyote.http11=debug 을 추가하면 HTTP 요청 메시지를 확인할 수 있다.
• 얼로드 사이즈도 제한할 수 있다.
  • spring.servlet.multipart.max-file-size=1MB
  • spring.servlet.multipart.max-request-size=10MB
• spring.servlet.multipart.enabled=false 처리하면 서블릿 컨테이너는 멀티파트와 관련된 처리를 하지 않는다.
• spring.servlet.multipart.enabled 옵션을 켜면 스프링의 DispatcherServlet 에서 멀티파트 리졸버( MultipartResolver )를 실행한다.
• 서블릿을 이용한 파일업로드를 좀더 자세하기 구현해 보자.

@Slf4j
@Controller
@RequestMapping("/servlet/v2")
public class ServletUploadControllerV2 {
    @Value("${file.dir}")
    private String fileDir;

    @GetMapping("/upload")
    public String newFile() {
        return "upload-form";
    }

    @PostMapping("/upload")
    public String saveFileV1(HttpServletRequest request) throws ServletException, IOException {

        log.info("request={}", request);

        String itemName = request.getParameter("itemName");
        log.info("itemName={}", itemName);

        Collection<Part> parts = request.getParts();
        log.info("parts={}", parts);

        for (Part part : parts) {
            log.info("==== PART ====");
            log.info("name={}", part.getName());
            Collection<String> headerNames = part.getHeaderNames();
            for (String headerName : headerNames) {
                log.info("header {}: {}", headerName,
                        part.getHeader(headerName));
            }

            //데이터 읽기
            InputStream inputStream = part.getInputStream(); String body = StreamUtils.copyToString(inputStream, StandardCharsets.UTF_8);
            log.info("body={}", body);
            //파일에 저장하기
            if (StringUtils.hasText(part.getSubmittedFileName())) {
                String fullPath = fileDir + part.getSubmittedFileName(); log.info("파일 저장 fullPath={}", fullPath);
                part.write(fullPath);
            }
        }
        return "upload-form";
    }
}

• application.properties 에서 설정한 file.dir 의 값을 주입한다.
• 멀티파트 형식은 전송 데이터를 하나하나 각각 부분( Part )으로 나누어 전송한다. parts 에는 이렇게 나누어진 데이터가 각각 담긴다.
• 서블릿이 제공하는 Part 는 멀티파트 형식을 편리하게 읽을 수 있는 다양한 메서드를 제공한다.
• part.getSubmittedFileName() : 클라이언트가 전달한 파일명
• part.getInputStream(): Part의 전송 데이터를 읽을 수 있다.
• part.write(...): Part를 통해 전송된 데이터를 저장할 수 있다.
• 서블릿이 제공하는 Part 는 편하기는 하지만, HttpServletRequest 를 사용해야 하고, 추가로 파일 부분만 구분하려면 여러가지 코드를 넣어야 한다.
• 결국 스프링에서 제공하는 파일업로드 방식을 주로 사용하게 된다.

스프링이 제공하는 파일업로드

• 스프링이 제공하는 파일업로드를 아래와 같이 구현할 수 있다.

    @Controller
    @RequestMapping("/spring")
    public class SpringUploadController {

        @Value("${file.dir}")
        private String fileDir;

        @GetMapping("/upload")
        public String newFile() {
            return "upload-form";
        }

        @PostMapping("/upload")
        public String saveFile(@RequestParam String itemName, @RequestParam MultipartFile file, HttpServletRequest request) throws IOException {
            log.info("request={}", request);
            log.info("itemName={}", itemName);
            log.info("multipartFile={}", file);

            if (!file.isEmpty()) {
                String fullPath = fileDir + file.getOriginalFilename(); 
                log.info("파일 저장 fullPath={}", fullPath); 
                file.transferTo(new File(fullPath));
            }

            return "upload-form";
        }
    }

• file.getOriginalFilename() : 업로드 파일 명
• file.transferTo(...) : 파일 저장

스프링이 제공하는 파일업로드를 사용하는 예제

• 먼저 파일의 정보를 저장할 클래스를 정의한다.

    @Data
    public class UploadFile {
      private String uploadFileName;
      private String storeFileName;
      public UploadFile(String uploadFileName, String storeFileName) {
          this.uploadFileName = uploadFileName;
          this.storeFileName = storeFileName;
    }

• uploadFileName : 고객이 업로드한 파일명
• storeFileName : 서버 내부에서 관리하는 파일명
• 다음으로 파일 저장과 관련된 기능을 구현할 클래스를 구현한다.

    @Component
    public class FileStore {
        @Value("${file.dir}")
        private String fileDir;

        public String getFullPath(String filename) {
            return fileDir + filename;
        }
        public List<UploadFile> storeFiles(List<MultipartFile> multipartFiles) throws IOException {
            List<UploadFile> storeFileResult = new ArrayList<>();
            for (MultipartFile multipartFile : multipartFiles) {
                if (!multipartFile.isEmpty()) {
                    storeFileResult.add(storeFile(multipartFile));
                }
            }
            return storeFileResult;
        }

        public UploadFile storeFile(MultipartFile multipartFile) throws IOException {

            if (multipartFile.isEmpty()) {
                return null;
            }

            String originalFilename = multipartFile.getOriginalFilename();
            String storeFileName = createStoreFileName(originalFilename);
            multipartFile.transferTo(new File(getFullPath(storeFileName)));
            return new UploadFile(originalFilename, storeFileName);
        }

        private String createStoreFileName(String originalFilename) {
            String ext = extractExt(originalFilename);
            String uuid = UUID.randomUUID().toString();
            return uuid + "." + ext;
        }

        private String extractExt(String originalFilename) {
          int pos = originalFilename.lastIndexOf(".");
          return originalFilename.substring(pos + 1);
        }
    }

• createStoreFileName() : 서버 내부에서 관리하는 파일명은 유일한 이름을 생성하는 UUID 를 사용해서 충돌하지 않도록 한다.
• extractExt() : 확장자를 별도로 추출해서 서버 내부에서 관리하는 파일명에도 붙여준다.
  • ex> 고객이 a.png 라는 이름으로 업로드 하면 51041c62-86e4-4274-801d-614a7d994edb.png 와 같이 저장한다.
• 컨트롤러는 아래와 같이 구현할 수 있다.

    @Data
    public class ItemForm {
      private Long itemId;
      private String itemName;
      private List<MultipartFile> imageFiles;
      private MultipartFile attachFile;
    }

@Slf4j
@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemRepository itemRepository;
    private final FileStore fileStore;

    @GetMapping("/items/new")
    public String newItem(@ModelAttribute ItemForm form) {
        return "item-form";
    }

    @PostMapping("/items/new")
    public String saveItem(@ModelAttribute ItemForm form, RedirectAttributes redirectAttributes) throws IOException {
        UploadFile attachFile = fileStore.storeFile(form.getAttachFile());
        List<UploadFile> storeImageFiles = fileStore.storeFiles(form.getImageFiles());

        //데이터베이스에 저장
        Item item = new Item(); 
        item.setItemName(form.getItemName()); 
        item.setAttachFile(attachFile); 
        item.setImageFiles(storeImageFiles); 
        itemRepository.save(item);

        redirectAttributes.addAttribute("itemId", item.getId());
        return "redirect:/items/{itemId}";
    }

    @GetMapping("/items/{id}")
    public String items(@PathVariable Long id, Model model) {
        Item item = itemRepository.findById(id);
        model.addAttribute("item", item);
        return "item-view";
    }

    @ResponseBody
    @GetMapping("/images/{filename}")
    public Resource downloadImage(@PathVariable String filename) throws MalformedURLException {

    return new UrlResource("file:" + fileStore.getFullPath(filename));

    }

    @GetMapping("/attach/{itemId}")
    public ResponseEntity<Resource> downloadAttach(@PathVariable Long itemId) throws MalformedURLException {
        Item item = itemRepository.findById(itemId);
        String storeFileName = item.getAttachFile().getStoreFileName();
        String uploadFileName = item.getAttachFile().getUploadFileName();

        UrlResource resource = new UrlResource("file:" + fileStore.getFullPath(storeFileName));
        log.info("uploadFileName={}", uploadFileName);

        String encodedUploadFileName = UriUtils.encode(uploadFileName, StandardCharsets.UTF_8);
        String contentDisposition = "attachment; filename=\"" + encodedUploadFileName + "\"";

        return ResponseEntity.ok()
                            .header(HttpHeaders.CONTENT_DISPOSITION, contentDisposition)
                            .body(resource);
    }        
}

• downloadImage 메소드는 UrlResource 를 통해서 해당 경로에서 이미지를 가져와서 화면에 이미지가 출력되게 해준다.
• downloadAttach 메소드는 파일을 웹상에서 다운받을 수 있게해준다.
  • String contentDisposition = "attachment; filename="" + encodedUploadFileName + """; 이렇게 설정해주고
  • 위와 같이 헤더에 넘겨주면 된다.

REFERENCES

• 김영한님의 스프링 MVC 2편