RN-이미지 변경 및 업로드

추가기능으로 

프로필에서 프로필 사진을 추가 및 변경 하는 기능을 추가하려고 하였다. 

리액트 네이티브는 이미지 업로드 기능이 있을까?

 

찾아 보니 expo에서 지원하는 imagePicker 라는게 있었음 

https://docs.expo.dev/versions/latest/sdk/imagepicker/

ImagePicker

빠르게 읽어보고 설치 

npx expo install expo-image-picker

임포트 해오고

import * as ImagePicker from 'expo-image-picker';

 

내가 원하는건 

카메라 촬영기능까지는 아니고

이미지 파일에 접근할 수 있는 권한만 얻으면 되기 떄문에 

 ImagePicker.useMediaLibraryPermissions()

요고 사용 

 

const ImagePickerComponent = () => {
  const user = authService.currentUser;
  const [dp, setDp] = useState(false);
  const [profile, setProfile] = useState(user.photoURL ?? null);

  //현재 이미지 주소
  const [image, setImage] = useState(null);
  //권한 요청을 위한 hooks
  const [status, requestPermission] = ImagePicker.useMediaLibraryPermissions();

  //이미지 선택
  const selectImage = async () => {
    // 권한 확인코드: 권한 없으면 물어보고, 승인하지 않으면 함수 종료
    if (!status.granted) {
      const permission = await requestPermission();
      if (!permission.granted) {
        return null;
      }
    }
    //이미지 업로드 기능
    const imageData = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
      aspect: [3, 3],
    });
    if (imageData.canceled) {
      return null; //이미지 업로드 취소한 경우
    }

    const source = { uri: imageData.assets[0].uri };
    setImage(source);
    setDp(true);
  };

그다음 내가 받을 데이터를 설정할 수 있는 속성들이 있는데 

타입이 뭔지, 크롭이 가능한지, 사진 퀄리티, 비율 설정 등을 할 수 있다. 

 

위와 같이 데이터를 가지고 온 뒤 uri 만 따로 뺴서 state에 넣는다. 

 

그다음에는 uri을 storage서버 (firebase 같은 곳) 에 보내주면 된다.