Angular 5 – Spring Boot 서버에서 MultipartFile 업로드/가져오기

https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

Angular 5 – Spring Boot 서버에서 MultipartFile 업로드/받기

Servlet 컨테이너에 파일을 업로드할 때 애플리케이션은 MultipartConfigElement 클래스를 등록해야 합니다. 그러나 Spring Boot는 자동으로 구성하여 더 쉽게 만들 수 있습니다. 이 튜토리얼에서는 Spring Boot RestApi 서버에서 MultipartFile을 업로드/가져오기 위해 Angular 5 앱 클라이언트를 빌드하는 방법을 살펴보겠습니다.

관련 게시물:
  • How to upload MultipartFile with Spring Boot
  • MultipartFile - SpringBoot + JQuery Ajax + Bootstrap.
  • MultipartFile – SpringBoot + AngularJs + Bootstrap.
  • Angular 4 Firebase – Get List Files from Storage
  • Angular 4 – Upload/Get MultipartFile to/from Spring Boot Server

  • I. 기술


  • 각진5
  • 자바 1.8
  • 스프링 부트 1.5.7.RELEASE
  • 메이븐 3.3.9

  • Spring Tool Suite – 버전 3.8.1.RELEASE

    II. 개요



    1. 스프링 부트 서버




  • StorageService 초기화, 모든 파일 삭제, 파일 저장, 파일 로드에 도움이 됨
  • UploadControllerStorageService를 사용하여 Rest API 제공: 파일 POST, 모든 파일 GET
  • MultipartFile 최대 크기와 같은 매개 변수를 구성하는 application.properties...

  • pom.xml의 Spring Boot Starter 웹 종속성

    2. Angular 5 앱 클라이언트




  • upload-file.service는 파일을 스토리지로 푸시하고 파일을 가져오는 방법을 제공합니다.
  • list-upload.component 파일 목록을 가져와서 표시합니다.
  • form-upload.component가 파일 업로드를 도와줍니다.
  • details-upload.component는 파일 목록의 각 항목에 대한 세부 정보입니다.



  • III. 관행



    1. 스프링 부트 서버



    1.1 스프링 부트 프로젝트 생성



    종속성 있음:
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    1.2 파일 시스템용 스토리지 서비스 생성



    4가지 기능으로 StorageService를 만듭니다.
  • public void store(MultipartFile file): 파일 저장
  • public Resource loadFile(String filename): 파일 로드
  • public void deleteAll(): 업로드된 모든 파일 제거
  • public void init(): 업로드 디렉토리 생성
    
    package com.javasampleapproach.uploadfiles.storage;

  • import java.io.IOException;
    import java.net.MalformedURLException;
    import java.nio.file.Files;
    import java.nio.file.Path;
    import java.nio.file.Paths;

    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.core.io.Resource;
    import org.springframework.core.io.UrlResource;
    import org.springframework.stereotype.Service;
    import org.springframework.util.FileSystemUtils;
    import org.springframework.web.multipart.MultipartFile;

    @서비스
    공개 클래스 StorageService {

    Logger log = LoggerFactory.getLogger(this.getClass().getName());
    private final Path rootLocation = Paths.get("upload-dir");
    
    public void store(MultipartFile file) {
        try {
            Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename()));
        } catch (Exception e) {
            throw new RuntimeException("FAIL!");
        }
    }
    
    public Resource loadFile(String filename) {
        try {
            Path file = rootLocation.resolve(filename);
            Resource resource = new UrlResource(file.toUri());
            if (resource.exists() || resource.isReadable()) {
                return resource;
            } else {
                throw new RuntimeException("FAIL!");
            }
        } catch (MalformedURLException e) {
            throw new RuntimeException("FAIL!");
        }
    }
    
    public void deleteAll() {
        FileSystemUtils.deleteRecursively(rootLocation.toFile());
    }
    
    public void init() {
        try {
            Files.createDirectory(rootLocation);
        } catch (IOException e) {
            throw new RuntimeException("Could not initialize storage!");
        }
    }
    

    }

    1.3 업로드 컨트롤러 만들기



    더 보기:

    https://grokonez.com/java-integration/angular-5-upload-get-multipartfile-to-from-spring-boot-server

    Angular 5 – Spring Boot 서버에서 MultipartFile 업로드/받기

    좋은 웹페이지 즐겨찾기