[react - flask] 리액트 - 플라스크 파일 및 데이터 주고받기

리액트와 플라스크 서버가 파일 및 데이터를 주고받는 방법을 알아보자. 

우선 필자는 리액트에서 post 요청으로 플라스크에 파일을 보내고, 플라스크에서 파일을 처리한 결과를 다시 리액트로 보내야 하는 상황이었다. 딱히 별도의 노드 등의 서버는 사용하지 않았다. 코드는 다음과 같다.

React

const uploadFile = async(e)=>{
    const formData = new FormData();
    formData.append("file" ,file);
    formData.append("fileName" , fileName);

    try{
      	const res = await axios.post(
        	"http://192.249.28.86:5000/react_to_flask", //send file to flask 
        	formData
      	);

      	console.log(res.data); // 서버로부터 받은 데이터는 res에

 .....이하 생략

 

Flask

import os
from flask_cors import CORS
from flask import Flask, jsonify, request
import main


app = Flask(__name__)
app.config['DEBUG'] = True
CORS(app)


@app.route('/react_to_flask', methods=['POST'])
def react_to_flask():
    parsed_request = request.files.get('file')
    fileName = request.form.get('fileName')

    dir_path = os.path.dirname(os.path.realpath(__file__))
    dir_path = dir_path + "\data"
    saved_file_path = os.path.join(dir_path, fileName)
    parsed_request.save(saved_file_path) 	# saved_file_path 경로에 받은 file 저장
    
.....중략
    data = jsonify(data)
    return data


if __name__ == '__main__':
    app.run(host="0.0.0.0", port="5000",  debug=True)

 

보통의 text content는 request.form으로 들어오지만 파일의 경우 특별히 request.files로 들어온다는 점을 유의하자. 또한 노드 서버의 formData는 리액트의 formData랑 전혀 다른 형식이니 사용하지 않기를 권한다.