将 base64 图像上传到 Firebase React native

Question

我尝试在 iOS 上使用 React Native 将“base64”图像上传到 Firebase。但是当我尝试上传图片时，出现以下错误：

undefined 不是一个对象（评估 'uri.substring'）

我使用route.params 获取我的图像，如果我在这样的视图中显示图像，则会显示图像。

<Image style={styles.image} source={{ uri: `data:image/png;base64,${myImage}` }}/>

如果图像是“base64”，我应该做其他事情还是我应该做什么？

这是我的代码：

// Here is how I get the image
const { myImage } = props.route.params;

const uploadImage = async () => {
  const {uri} = myImage;
  const filename = uri.substring(uri.lastIndexOf('/') + 1);
  const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
  setUploading(true);

  setTransferred(0);
  const task = storage()
    .ref(filename)
    .putFile(uploadUri);
  // set progress state
  task.on('state_changed', snapshot => {
    setTransferred(
      Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
    );
  });
  try {
    await task;
  } catch (e) {
    console.error(e);
  }
  setUploading(false);
  Alert.alert(
    'Photo uploaded!',
    'Your photo has been uploaded to Firebase Cloud Storage!'
  );
};

Answer 1

查看您当前的代码，您从props.route.params中取出myImage，这是一个与PNG图像对应的Base 64字符字符串（例如iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII= - 单个PNG的数据# FFFFFF 像素）。

const { myImage } = props.route.params;

在下面，您尝试从 myImage 字符串中获取属性 uri。由于此属性不存在，您将获得undefined。然后，此 uri = undefined 值会在下一行引发错误。

const { uri } = myImage; // uri is undefined! ("".uri === undefined)
const filename = uri.substring(uri.lastIndexOf('/') + 1); // throws error!

上传数据 URL 的正确方法是使用documentation here 中介绍的Reference#putString() 方法。

将此应用于您的代码，您将使用：

const { myImage } = props.route.params;

const uploadImage = async () => {
  const dataUrl = `data:image/png;base64,${myImage}`;

  // you could use a Firestore Doc ID, a RTDB Push ID or
  // some `uuid` implementation to generate a suitable filename.
  const storageRef = storage()
    .ref(/* provide a path for the image */);

  const uploadTask = storageRef
    .putString(dataUrl, 'data_url');

  uploadTask.on('state_changed', snapshot => {
    setTransferred(
      Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
    );
  });

  try {
    await uploadTask;
    
    setUploading(false);
    Alert.alert(
      'Photo uploaded!',
      'Your photo has been uploaded to Firebase Cloud Storage!'
    );
  } catch (err) {
    // TODO: Check value of `err.code` and handle appropriately.
    console.error('Upload failed: ', err);
    Alert.alert(
      'Photo upload failed!',
      'Your photo didn\'t upload properly!'
    );
  }
}

为防止覆盖其他人的数据并使安全规则更易于实施，您应在上传的文件前加上类似于以下内容的用户 ID：

const storageRef = storage()
    .ref('userUploads')
    .child(firebase.auth().currentUser.uid)
    .child(/* generated image ID */);

// builds a reference to /userUploads/someUserId/someImageId