[ReactNative/AWS S3/Multer-S3] image-picker를 사용한 사진 업로드(1)

리액트 네이티브 앱 프로젝트를 진행하면서 image-picker를 이용한 사진 업로드를 구현한 과정을 기록하고자 한다.

개발 환경은 아래 이미지로 요약하고자 한다.

본 글에서는 image-picker를 사용한 사진 업로드가 주된 내용이므로 AWS 백앤드 구축 관련한 내용은 생략한다.

 

image-picker로 사용자 앨범에서 선택한 사진을 S3로 업로드 하는 로직을 간단하게 요약하자면 아래와 같다.

1.client : image-picker의 launchImageLibrary메소드를 통해 사용자 앨범에 접근하여 사진을 선택하고 객체를 반환한다.

2.반환 받은 객체를 HTTP 통신으로 서버에 전송하기 위해 Formdata 처리를 해준다.

3.fetch를 사용하여 API 서버에 formdata를 post request 요청한다.

4.서버: multer과 multer-s3 미들웨어를 사용하여 전달받은 파일(formdata처리 된 사진)을 AWS S3에 이미지 업로드한다

5.S3에 성공적으로 업로드 되면 S3에 업로드된 사진의 url를 반환받는다.

6.사진의 url을 Mysql DB에 전송한다.

 

 

1.Image-picker 라이브러리 설치

 

먼저 리액트 네이티브 프로젝트에 image-picker 라이브러리를 설치해준다.

npm install --save react-native-image-picker

 

ios환경에서 개발 중이라면 추가적으로 아래 명령어를 입력해주자.

cd ios && pod install

 

정상적으로 설치 되었다면 package.json dependencies 에 image-picker가 추가된 것을 확인 할 수 있다.

※react-native 공식 문서에 따르면 react-native version 0.60 이상 부터는 auto linking을 지원하므로

AndroidManifest.xml에 카메라 권한등을 따로 설정할 필요가 없다.

본인의 경우 보다시피 0.67.4 버전을 사용하고 있어 따로 권한설정을 해주지 않았다.

 

2.Import 및 전체 소스코드

import React from 'react';
import {Text, View, Button} from 'react-native';
import styled from 'styled-components';

//카메라, 앨범 접근 라이브러리
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

const Container = styled.View`
  flex: 1;
  color: purple;
`;
const Box1 = styled.View`
  flex: 1;
  background-color: tomato;
  border: 2px solid black;
`;
const Box2 = styled.View`
  flex: 3;
  background-color: skyblue;
  border: 2px solid black;
`;

/* option 사용법
launchCamera({saveToPhotos:true}, response=>{
  this.setState({
    avatar: response.uri
  })
})
*/

const ShowPicker = () => {
  //launchImageLibrary : 사용자 앨범 접근
    launchImageLibrary({}, (res)=>{
      alert(res.assets[0].uri)
      const formdata = new FormData()
      formdata.append('file', res.assets[0].uri);
      console.log(res);
    })
}

const Community = () => {
  return (
    <Container>
      <View style={{flex:1, padding:16}}>
        <Button title='show picker' onPress={ShowPicker}></Button>
      </View>
      <Box1>
        <Text>카테고리</Text>
      </Box1>
      <Box2 />
    </Container>

  );
};


export default Community;

위 코드는 image-picker를 통해 사용자 앨범에 접근하기 위한 test 코드이다. fetch를 통해 서버에 사진(formdata 처리된)을 전송하는 파트는 다음 글에서 정리하겠다.

 

 

앨범에 접근하기 위한 버튼을 임의로 생성하였다.

버튼 클릭시 정상적으로 앨범에 접근할 수 있는 것을 확인!!