[리액트네이티브] ImagePicker 데이터 서버로 보내기 / expo, axios, FormData, 안드로이드

[React Native_image axios]

 

ImagePicker로 받아온 이미지 데이터를 서버로 보내는 방법을 알아보자

 

---

<STUDY>

 

1. ImagePicker 사진 가져오기

 

expo ImagePicker library를 이용하여 데이터를 받아오는 방법은 지난 포스팅에서 소개했다.

ImagePicker 사용 방법이 궁금하다면 포스팅을 참고하면 될 것이다.

 

👉 [리액트네이티브] 갤러리에서 사진 가져오기-ImagePicker

 

 

2. axios

import axios from 'axios';

const data = {
  key: value,
}

axios.post('url', data}
  .then(response => console.log) // 성공한 경우
  .catch(error => console.log) // error가 발생한 경우

일반적으로 리액트에서의 axios - post 통신은 이런 식으로 이루어 진다.

 

❔ 그러나 리액트 네이티브에서 image를 전달하려고 했더니 오류가 발생했다.

 

 

3. formData

import React, { useState } from 'react';
import axios from 'axios';
import FormData from 'form-data';

``````

const imageForm = new FormData(); // 사진 전송 폼 (data)

// 사진 전송 이벤트 (서버 통신)
// props.image : ImagePicker에서 가져온 데이터의 uri (result.uri 전 포스팅 참고)
imageForm.append('file', {uri: props.image, type: 'multipart/form-data', name: filename});

axios.post('url', imageForm, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => console.log)
  .catch(error => console.log )

❓ 이미지 데이터를 서버에 전달하기 위해서는 formData를 사용해야한다.

 

   💡 formData.append(key, value)

      ❕ key : 서버와 동일하게 작성

      ❕ value : uri, type, name을 모두 넣어야 함 (하나라도 들어가지 않거나 따로 변경하면 오류 발생)

      ❕ uri : 이미지의 정보로 ImagePicker 에서 받아온 result.uri 를 삽입

      ❕ type : multipart/form-data 로 넣어줘야함

 

  💡 axios.post 에서 headers 에 반드시 'Content-Type': 'multipart/form-data' 를 추가해 주어야 함

 

---

 

평소와 같이 코드를 작성했는데 오류가 생겨서 당황했었다.

 

잘 숙지하고 있다가 다음 번에는 같은 실수를 하지 않기를!

 

 

---

 

내가 보려고 정리하는 리액트 네이티브🔆

 

 

👉ez1n github 구경하기👈

 

ez1n - Overview