尝试将图像上传到 firebase 存储

Question

我正在尝试将设备上的图像上传到 Firebase 存储，但我不知道应该使用哪种格式。 我试过 put 和 putString，但他们都给了我无效的论点。

这是选择和上传图像的代码。

const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  const uploadImage = async () => {
    if (!image) {
      Alert.alert(
        'You have to choose an image first'
      );
    } else {
      const uri = image;
      console.log(uri);
      const filename = uri.substring(uri.lastIndexOf('/') + 1);
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
      setUploading(true);
      setTransferred(0);
      const task = firebase.storage()
        .ref(filename)
        .put(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!'
      );
      setImage(null);
      }
};

这是图像的 uri（con​​sole.log 输出）：

这是使用 .put(uploadUri) 的错误：

这是使用 .putString(uploadUri, 'data_url') 的错误：

Answer 1

为了使用put在 Firebase 存储上上传图像，您需要将blob作为 param 而不是string传递。

例如，您可以执行以下操作：

import path from 'path'

const uid = 'image-id'
const fileName = uid + path.extname(uri)
const response = await fetch(uri)
const blob = await response.blob()


const uploadImage = firebase
      .storage()
      .ref()
      .put(blob, {
        contentType: `image/${path.extname(uri).split('.').pop()}`
      })

uploadImage.on(
      'state_changed',
      snapshot => {
        // progress
      },
      err => {
        // error
      },
      () => {
        // complete
      }