[flutter] Dart 네이버 커머스 API 연동하기(2): 상품 이미지 다건 등록

안녕하세요 종백이입니다😎

네이버 커머스 API

 

지난번 Dart 네이버 커머스 api 연동하기로 token 받는 방법에 대해 봤었는데요!

이번에는 가장 어려운 난이도인 상품 이미지 다건 등록을 해보겠습니다 ㅎㅎ

지난 Dart 네이버 커머스 api 연동하기 글 보러 가기

[flutter] Dart 네이버 커머스 api 연동하기

 

이미지 다건 등록은 파이썬으로 연동할 당시에도 여러 작업을 해줬어야 해서 번거로웠는데 dart에서는 어떨지 궁금했는데 역시나 생소한 과정이 필요하더라고요 ㅎㅎ

 

파이썬 상품 이미지 다건등록 글 보러 가기

[파이썬] 네이버 커머스 API requests post로 서버에 이미지 보내기

한번 같이 보겠습니다!

 

필요개념

이미지 데이터를 네이버 서버로 올리기 위해 필요한 개념은 MultipartFile이라는 개념이었습니다. 말 그대로 여러 파일이라는 의미입니다.

 

이 MultipartFile 은 http 모듈 내장 함수로 이미지 데이터를 Byte 형식으로 받을지 String형식으로 받을지 아니면 데스크탑에 다운되어 있는 이미지를 불러올지 선택할 수 있습니다.

 

이번 예제에서는 fromBytes라는 조건을 이용해서 Byte형식으로 붙여 넣겠습니다!

 

사용 순서

1. 이미지 Byte Data 추출
2. Byte Data image모듈을 이용해 JPG 인코딩
3. http.MultipartFile.fromBytes를 통해 요청 준비
4. 요청

위와 같은 순서로 진행하게 됩니다.

 

1. 이미지 Byte Data 추출 및 2. Byte Data image 모듈을 이용해 JPG

이미지 Byte 추출에서는 dart:io에 있는 File() 클래스를 이용해서 불러올 수 있습니다.

File imageFile = File("이미지Path.jpg")
if (await imageFile.exists()){
	final imgByte = img.decodeImage(await imageFile.readAsBytes());
    List<int> realImageByte = img.encodeJpg(imgByte);
}

위와 같은 방식으로 realImageByte에 이미지 Byte Data를 넣어줍니다.

 

3. http.MultipartFile.fromBytes를 통해 요청 준비 및 4. 요청

Uri url = Uri.https("이미지 다건등록 URL");
Map<String, String> headers = {
  'Authorization': "Bearer $token",
};
var request = http.MultipartRequest("POST", url);
request.headers.addAll(headers);

final httpImage = http.MultipartFile.fromBytes(
    'imageFiles[0]',
    realImageBytes,
    contentType: MediaType("image", "jpeg"),
    filename: "realImageBytes",
);
request.files.add(httpImage);

final response = await request.send();
var res = await http.Response.fromStream(response);

1, 2번 과정에서 얻은 realImageBytes 데이터를 위 형식으로 넣어줍니다. fromBytes에는 순서대로 field, bytes, type, filename을 넣어줍니다. field 에는 요청 데이터를 넣어줍니다.

네이버 요청값

네이버에서는 imageFiles를 요청해서 imageFiles[0]를 넣어줬습니다. 여러 값을 보낼 시 숫자를 높여주면서 넣은 후 add 해주시면 됩니다.

 

위 방식으로 요청해 주면 이미지 다건등록을 완료하실 수 있습니다!

이상으로 마치겠습니다!