>

Firebase에 업로드 한 이미지 파일을 보는 데 문제가 있으며 Firebase의 파일 형식에 문제가 있음을 알았습니다.

내 Firebase 스토리지 콘솔에 두 개의 파일이 있습니다. 하나는 내 IOS 시뮬레이터 (옥텟 스트림)에서 업로드되고 다른 하나는 올바르게 업로드되고 볼 수있는 브라우저에서 콘솔로 직접 업로드되었습니다.

선택 및 업로드 기능은 다음과 같습니다.

_selectPhoto = async () => {
    const status = await getPermission(Permissions.CAMERA_ROLL);
    if (status) {
      let imageName = "pic"
      const result = await ImagePicker.launchImageLibraryAsync(options);
      if (!result.cancelled) {
        Animated.timing(this.animatedWidth, {
          toValue: 600,
          duration: 15000
      }).start()
        this.uploadImage(result.uri, imageName)
        .then(() => {
        this.props.navigation.navigate('Profile')
        })        
        .catch((error) => {
          Alert.alert('Must Sign In');
          this.props.navigation.navigate('Login')
          console.log(error);
        })
      }
    }

  };

uploadImage = async (uri, imageName) => {
    const user = firebase.auth().currentUser;
    const response = await fetch(uri);
    const blob = await response.blob();
    let storageRef = firebase.storage().ref().child(''images/'+user.displayName+'/'+imageName+'.jpg'');
    const snapshot = await storageRef.put(blob);
    blob.close();
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log("File available at", downloadURL);
      user.updateProfile({
        photoURL: downloadURL.toString(),
        }).then(function() {
            console.log('saved photo')
        }).catch(function(error) {
            console.log('failed photo')
        });
    });
}

콘솔에 링크가 있으면 미디어 및 토큰도 있습니다 :

... .appspot.com/o/profile-pic.jpg?alt=media&token=56eb9c36-b5cd-4dbb-bec1-3ea5c3a74bdd

VS 코드에서 CMD + 클릭하면 오류가 발생합니다 :

{
  error: {
    code: 400,
    message: "Invalid HTTP method/URL pair."
  }
}

당연히 브라우저에 해당 링크를 넣으면 해당 이름의 파일을 다운로드하지만 다음과 같이 표시됩니다.

The file “pic.jpg” could not be opened. It may be damaged or use a file format that Preview doesn’t recognize.

아마도 mediaTypes와 관련이있을 수 있지만 사용 방법을 정확히 모르겠습니다.

mediaTypes : String -- Choose what type of media to pick. Usage: ImagePicker.MediaTypeOptions., where is one of: Images, Videos, All.

감사합니다!

  • 답변 # 1

    지난 며칠 동안 같은 문제로 싸우고 있습니다. 마지막으로 Expo 저장소의 Firebase 업로드 예제에 따라 이미지를 업로드하고 렌더링 할 수있었습니다. 왜 작동하는지 완전히 이해하지 못하지만 Firebase가 생성 한 얼룩을 좋아하지 않는 것 같습니다.

    const blob = await response.blob();

    위의 내용을 다음과 같이 바꾸십시오 :

    const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
          resolve(xhr.response);
        };
        xhr.onerror = function(e) {
          console.log(e);
          reject(new TypeError('Network request failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', uri, true);
        xhr.send(null);
      });
    
    

관련 자료

  • 이전 python - Pygoocanvas에 이미지 추가
  • 다음 clpfd - corelogic Clojure (CLP) 암호화 연산에서 apply 사용