React Native X Expo 이미지 데이터 expo-image-picker로 이미지 업로드 구현하기

이미지 업로드 기능 구현하기

 

 

앱에서 이미지나 사진을 업로드할 경우 두가지 방법이있습니다

 

첫번째는 사진을 찍어서 업로드를 하는 방법

두번째는 자신의 사진첩에서 불러와 업로드 하는 방법

 

이 두가지를 방법을 구현할 수 있는 기능을 알아보도록 하겠습니다

 

공식문서 사이드바에서

공식문서 & 유용한 툴 목차를 보자

 

이미지 픽커 공식문서

 

 

expo-image-picker 라이브러리는 설치

사진 접근 권한 알림 팝업 기능 구현

launchImageLibraryAsync를 사용해서 사진첩에 접근해서 사진을 불러옵니다

 

 

expo-image-picker 라이브러리는 설치하겠습니다

 

expo install expo-image-picker

 

---

 

권한 허용 함수 구현하기

 

 

사진을 등록할 경우에

접근권한을 물어보는 것이 좋을 것같습니다 

 

아래와 같이 함수를 구현하여

사진을 업로드 할 경우 권한이 가능한지에 대해

true, false를 반환하여 

값에 따라 다음 절차를 진행 여부를 판단합니다

 

const getPermission = async () => {
    if (Platform.OS !== 'web') { // is web or mobile?
          const {
            status,
          } = await ImagePicker.requestMediaLibraryPermissionsAsync();
          if (status !== 'granted') {
            alert('게시글을 업로드하려면 사진첩 권한이 필요합니다.');
            return false
          }
          return true
    }
};

 

 

위의 코드에서 ImagePicker.requestMediaLibraryPermissionsAsync();

함수를 사용해서 팝업 창이 노출되면서 허용 권한을 설정할 수 있게됩니다

그리고 한번 허용되면 다음부터는 팝업이 노출되지 않을겁니다

 

그럼 권한 허용이 되면

다음 함수를 실행합니다

 

---

 

 

 

반응형

 

 

---

 

디바이스 내 사진첩 사진 데이터 불러오기, 찍은 사진 데이터 불러오기

 

 

그럼 아래와 같이 코드를 구현합니다

이때 launchImageLibraryAsync를 사용해서 사진첩에 접근해서 사진을 불러옵니다

그리고 사진을 선택하면 함수의 리턴값으로 이미지 데이터를 받을 수 있습니다

 

또 한, launchCameraAsync 함수를 사용하면

직접 사진을 찍어서 앱 내부로 데이터를 가져올 수 있습니다

 

아래와 같이 함수를 구현합니다

 

 

const pickImage = async () => {
    console.log('이미지 선택');
    let imageData = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All, // 이미지 타입을 지정할 수 있다
        allowsEditing: true, // 사진을 수정허용 여부을 지정한다.
        aspect: [4, 4], // 사진의 비율을 정할 수 있다.
        quality: 1, // 현재 용량을 줄이고 높일 수 있다.
    });
    console.log('이미지 데이터: ', imageData);
};

 

 

사진을 불러올때 여러가지 옵션이 있습니다

용량을 줄이거나 사진비율을 정하거나 수정을 허용여부를 정할수도 있습니다

아래에 더 자세하게 설명해놓았습니다

확인해보세요!~

 

 

 

ImagePickOption

allowsEditing (optional)	boolean	이미지를 선택한 후 편집할 UI를 표시할지 여부입니다. Android에서는 사용자가 이미지를 자르고 회전할 수 있고 iOS에서는 단순히 이미지를 자를 수 있습니다. Default: false
allowsMultipleSelection (optional)	boolean	Only for: Web 한 번에 여러 미디어 파일을 선택할 수 있는지 여부입니다.
aspect (optional)	[number, number]	[x, y]사용자가 이미지를 편집할 수 있는 경우( 를 전달하여) 유지할 종횡비를 지정하는 두 개의 항목이 있는 배열입니다 allowsEditing: true. iOS에서는 자르기 사각형이 항상 정사각형이기 때문에 Android에서만 적용할 수 있습니다
base64 (optional)	boolean	Base64 형식의 이미지 데이터도 포함할지 여부입니다.
exif (optional)	boolean	이미지에 대한 EXIF ​​데이터도 포함할지 여부입니다. iOS에서 EXIF ​​데이터는 카메라 케이스에 GPS 태그를 포함하지 않습니다.
mediaTypes (optional)	MediaTypeOptions	선택할 미디어 유형을 선택합니다. Default: ImagePicker.MediaTypeOptions.Images
presentationStyle (optional)	UIImagePickerPresentationStyle	Only for: iOS 사진/동영상을 촬영하는 동안 보기를 사용자 지정 하려면 프레젠테이션 스타일 을 선택하세요  Default: ImagePicker.UIImagePickerPresentationStyle.Automatic
quality (optional)	number	에서 까지 압축 품질을 지정 0합니다 1. 0작은 크기를 위한 1압축을 의미하고 최대 품질을 위한 압축을 의미합니다.
videoExportPreset (optional)	VideoExportPreset	Only for:  iOS 11+ 선택한 비디오를 압축하는 데 사용할 사전 설정을 지정합니다. Default: ImagePicker.VideoExportPreset.Passthrough
videoMaxDuration (optional)	number	비디오 녹화의 최대 지속 시간(초). 제한 을 0비활성화하도록 설정합니다. 기본값은 0(무제한)입니다. iOS 에서 allowsEditing가 로 설정된 true경우 최대 지속 시간은 10분으로 제한됩니다. 이 제한은 0값이 지정되거나 지정되지 않은 경우 자동으로 적용됩니다. Android 에서 이 옵션의 효과는 설치된 카메라 앱의 지원에 따라 다릅니다. 웹 에서 이 옵션은 효과가 없습니다. 제한은 브라우저에 따라 다릅니다.
videoQuality (optional)	UIImagePickerControllerQualityType	Only for:  iOS 녹화된 비디오의 품질을 지정합니다. 기본값은 장치에 사용할 수 있는 최고 품질입니다. Default: ImagePicker.UIImagePickerControllerQualityType.High

 

 

속성을 지정하고 함수를 호출하면 아래와 같이 데이터를 받을 수 있습니다

 

 

이미지 데이터

 

 

이 데이터를 받아서 클라우드에 저장하면 됩니다

그 방법은 클라우드에 맞는 여러방법들이 있을것이니

그에 맞게 기능구현이 필요할 것 같습니다

 

이렇게 expo-image-picker를 구현해보있습니다

그럼 오늘도 이렇게 글을 마치겠습니다

다음 포스팅도 기대해주시고~

 

앞으로 같이 계속 공부해보아요~