Backend/Spring

File Upload

brian110326 2024. 4. 26. 21:51

1. application.properties 설정

# 파일 업로드 처리
# 파일 업로드 가능 여부
spring.servlet.multipart.enabled=true

# 업로드된 파일의 저장 경로
spring.servlet.multipart.location=c:\\upload

# 한번에 최대 업로드 가능 용량
spring.servlet.multipart.max-request-size=30MB

# 파일 하나의 최대 크기
spring.servlet.multipart.max-file-size=10MB

# 서버의 특정 폴더 변수 설정
com.example.upload.path=c://upload

 

2. 화면단 작업

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="" id="" />
    <!-- multiple : 여러개 파일 선택 가능 -->
    <input type="file" name="files" id="" multiple />
    <button class="uploadBtn">업로드</button>

    <script>
      document.querySelector(".uploadBtn").addEventListener("click", (e) => {
        const inputFile = document.querySelector("[name='files']");
        console.log(inputFile);

        const files = inputFile.files;
        console.log(files);

        const formData = new FormData();

        for (let index = 0; index < files.length; index++) {
          formData.append("uploadFiles", files[index]);
        }

        fetch("/upload/uploadAjax", { method: "post", body: formData })
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
          });
      });
    </script>
  </body>
</html>