ReactJS 컴포넌트를 사용하여 파일을 Spring MVC/Data-REST 서버에 업로드하기 위한 포괄적인 가이드 (90자 이내)

title_thumbnail(ReactJS 컴포넌트를 사용하여 파일을 Spring MVC/Data-REST 서버에 업로드하기 위한 포괄적인 가이드 (90자 이내))

Table of Contents

ReactJS를 사용하여 Spring MVC/Data-REST 서버에 파일 업로드하는 방법

사용자가 브라우저에서 파일을 업로드하고 서버에 저장하는 ReactJS 컴포넌트를 만드는 방법을 찾고 있나요? 더 이상 찾을 필요가 없습니다! 이 튜토리얼에서는 ReactJS를 사용하여 Spring MVC/Data-REST 서버를 통해 파일 업로드 기능을 구현하는 방법을 단계별로 안내해 드립니다.

전제 조건

시작하기 전에 다음 요구 사항을 충족시켜야 합니다:

프로젝트에 설치되고 설정된 ReactJS
Java와 Spring 프레임워크에 대한 이해
작동 중인 Spring MVC/Data-REST 서버

단계 1: Frontend 설정

먼저, 파일 업로드 기능을 처리하는 ReactJS 컴포넌트를 생성해 보겠습니다. 다음 코드를 시작점으로 사용할 수 있습니다:


'use strict';

const React = require('react');
const ReactDOM = require('react-dom');

const log = require('./log');

const Dropzone = require('react-dropzone');
const request = require('superagent');

class Uploader extends React.Component {
  constructor(props) {
    super(props);
    this.dropHandler = this.dropHandler.bind(this);
  }

  dropHandler(file) {
    var jsonFile = new FormData();
    jsonFile.append('file', file[0]);
    jsonFile.append('name', file[0].name);

    request.post('/upload')
    .send(jsonFile)
    .end(function(err, resp) {
      if (err) {
        console.error(err);
      }
      return resp;
    });
  }

  render() {
    return (
      <Dropzone disableClick={false} multiple={false} accept={'application/java-archive'} onDrop={this.dropHandler}>
        <div>Appium Jar 파일을 드롭하거나 클릭하십시오.</div>
      </Dropzone>
    );
  }
}

module.exports = Uploader;

위의 코드는 “Uploader”라는 ReactJS 컴포넌트를 생성하며 react-dropzone 및 superagent 라이브러리를 사용합니다. “dropHandler” 함수는 선택한 파일을 저장하기 위해 서버로 전송합니다.

단계 2: Backend 구현

다음으로, 파일 업로드를 처리하기 위한 백엔드를 설정해 보겠습니다. 이 예제에서는 Spring MVC와 Spring Data REST를 사용합니다.

Spring 애플리케이션에서 새로운 컨트롤러 클래스를 생성합니다:


@Controller
public class FileUploadController {

    @RequestMapping(value="/upload", method=RequestMethod.GET)
    public @ResponseBody String provideUploadInfo() {
        return "You can upload a file by posting to this same URL.";
    }

    @RequestMapping(value="/upload", method=RequestMethod.POST)
    public @ResponseBody ResponseEntity<String> handleFileUpload(@RequestParam("name") String name,
            @RequestParam("file") MultipartFile file) throws Exception {
        // 파일 처리 로직
    }
}

위의 코드는 업로드 정보를 제공하기 위한 엔드포인트와 파일 업로드를 처리하기 위한 다른 엔드포인트를 설정합니다. “handleFileUpload” 메소드 내부의 로직을 요구 사항에 맞게 파일을 서버에 저장하기 위해 수정하세요.

단계 3: 연결 설정

이제 프론트엔드와 백엔드 모두 설정되었으므로 연결을 수립해야 합니다.

ReactJS 코드에서 “request.post(‘/upload’)” 라인은 파일이 전송될 URL을 지정합니다. Spring MVC 컨트롤러의 엔드포인트와 URL이 일치하는지 확인하세요.

또한, ReactJS 컴포넌트의 FormData 및 request 매개변수가 Spring 컨트롤러에서 정의된 요청 매개변수와 일치하는지 확인하세요.

결론

축하합니다! ReactJS와 Spring MVC/Data-REST 서버를 사용하여 파일 업로드 기능을 성공적으로 구현했습니다. 사용자는 이제 브라우저에서 파일을 업로드하고 서버에 저장할 수 있습니다. 프로젝트 요구 사항에 맞게 코드를 사용자 정의하고 오류 처리 및 진행 상황 추적과 같은 추가 기능을 탐색하십시오.

Spring을 사용하여 파일 업로드를 처리하는 자세한 내용은 공식 Spring 파일 업로드 가이드를 참조하세요.

좋은 코딩하세요!

참고 자료 :

reactjs