[리액트네이티브] react-native 이미지 가져오기 앨범에서 가져오기

firebase의 storage에 이미지를 업로드 하고

이미지의 링크로 데이터 베이스에 저장하려고 한다..

​

그 부분은 교수님께서 이미 하셨다 그래서

바로 바꿨는데

​

지금 직접 어플에서 찍은 것은

file://~~~~~.jpg로 되어 있다ㅏ

​

이 파일 데이터 타입은 로컬에서 밖에 안되니까

storage에 올려 데이터를 가져올 것이다

​

그래서 실행했지만

storage에서는 읽을 수 없는 파일이라고 나왔다

​

이런 점을 보완하기 위해

​

교수님꼐서 보여주셨던 앨범에서 이미지를 업로드 하는 식을 찾아보려고 한다!

근데 업로드를 안해뒀길래ㅋㅎㅋㅎ

​

​

​

참고

https://joylee-developer.tistory.com/172

[React Native] ImagePicker 사용해 사진 업로드하기

 

 

 

expo install expo-image-picker

을 install 해준다

 

 

// Image.js
import React from "react";
import * as ImagePicker from "expo-image-picker";
// ...
 
const Image = ({ url, onChangePhoto }) => {
  // photo 입력받는 button을 눌렀을 때 실행되는 함수
  const _handlePhotoBtnPress = async () => {
    // image library 접근에 대한 허가 필요 없음
    // ImagePicker를 이용해 Image형식의 파일을 가져온다
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });
 
    // cancelled가 아닐 때 가져온 사진의 주소로 onChangePhoto
    if (!result.cancelled) {
      onChangePhoto(result.uri);
    }
  };
 
  return (
    <Container>
      <ProfileImage source={{ uri: url }} />
      <PhotoButton onPress={_handlePhotoBtnPress}/>
    </Container>
  );
};
 
export default Image;

해당 코드를 입력해보면

​

​

​

​

나는

​

TypeError: Cannot read property 'launchImageLibraryAsync' of undefined

​

에러가 나왔다...

​

​

잘보니까

import한 것이 아예 달랐움

​

상단의 import에

 

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

를 넣어주면 실행됨

​

​

버튼을 하나 만들고 누르면 앨범이 나오고 이미지를 클릭하고 선택하면 이미지가 올라간다.

​

​

잡다한것도 있는데

​

이 코드는 firebase storage에 업로드 시키구 완성되면 그때 올리겠다...

​

아까 참고했던 블로그를 참고하면된다.

​

​

함수 코드 내가 추가한거 삭제하면서 필요한게 삭제되었을 수도 있으니 확인하구 코드 삽입하여 수정하세용

 

 const _handlePhotoBtnPress = async () => {
    // image library 접근에 대한 허가 필요 없음
    // ImagePicker를 이용해 Image형식의 파일을 가져온다
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });
 
    console.log(result)

    // cancelled가 아닐 때 가져온 사진의 주소로 onChangePhoto
    if (!result.canceled) {
      console.log(result.uri)
      setImage(result.uri); // Image태그의 source부분에 삽입하면됨

    }
  };

그리고 버튼하나 만들어서 위 코드를 실행하도록 한다.

​

​

firebase storage에는 올라가지만

미리보기가 안되고 있다..

​

​

고치면 storage에 올리는 코드도 작성해서 올리겠다!!

​