Flutter http Multipart/form-data 통신

안녕하세요. 엠엔디시스템입니다.

플러터로 앱을 만들다 보면 단순 데이터뿐만 아니라 이미지 등 과 같은 데이터도 통신으로 서버로 보내야 할 때가 있습니다.

이번 포스팅에서는 플러터의 http 모듈을 통해 이미지파일을 POST요청으로 서버로 보내는 방법을 포스팅해보겠습니다.

 

1. http 패키지 추가하기

pub.dev에서 http패키지를 찾아서 프로젝트에 pubspec.yaml에 추가하고 Pub get을 합니다.

pubspec.yaml http패키지 추가

 

2. http모듈로 통신하기

var request = http.MultipartRequest('POST', Uri.parse("서버 엔드포인트"))
    ..fields['cod'] = cod
    ..fields['cnt'] = cntCtr.text;

http.MultipartRequest("POST", uri);로 Multipart/form-data 요청을 하나 생성합니다.

..fileds['cod'] = cod의 구문으로 단순 변수도 함께 보낼 수 있습니다.

request.files.add(await http.MultipartFile.fromPath(
            'images',
            image.path,
          ));

생성한 요청에 .files.add()으로 멀티파트데이터를 첨부할 수 있습니다.

var response = await request.send();
var responseBody = await response.stream.bytesToString();

요청의 세팅이 완료되면 .send()로 요청을 서버로 보낼 수 있습니다. 이 때 try를 사용하여 적절한 예외처리가 필요합니다.

 

 

요청 전체코드

  void add() async{
    String cod = codCtr.text;
    
    var request = http.MultipartRequest('POST', Uri.parse("서버엔드포인트"))
    ..fields['cod'] = cod
    ..fields['cnt'] = cntCtr.text;


    if(pickedImages.isNotEmpty){
      for(XFile image in pickedImages){
        if(image != null){
          request.files.add(await http.MultipartFile.fromPath(
            'images',
            image.path,
          ));
        }
      }
    }

    try {
      var response = await request.send();
      var responseBody = await response.stream.bytesToString();


      if (response.statusCode == 200) {
        //요청 성공 후 처리
      } else {
        print("Failed to upload: $responseBody");
        Get.snackbar('알림', '등록 실패');
      }
    } catch (e) {
      print("Error sending request: $e");
      Get.snackbar('알림', '네트워크 문제 발생');
    }
  }