在 React Native 存储中上传图像时缺少参数“路径”答案

【问题标题】：Missing argument 'path' while uploading image in React Native storage在 React Native 存储中上传图像时缺少参数“路径”
【发布时间】：2019-03-18 18:55:49
【问题描述】：

我正在尝试允许用户将图像上传到 Firebase 实时数据库。我已经使用了“rn-fetch-blob”和“react-native-fetch-blob”，但无法让它工作。

通过此功能选择照片并将其保存为头像状态。

selectPhoto() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        let source = { uri: response.uri };
        this.setState({ avatar: source });
      }
    })
  }

uploadPhoto 然后尝试将其上传到 Firebase，但在“RNFetchBlob.fs.readFile”行出现“缺少参数 'path'”错误

uploadPhoto(mime = 'application/octet-stream') {
    return new Promise((resolve, reject) => {
      const uploadUri = this.state.avatar;
      let uploadBlob = null
      console.log('uid' + this.state.uid);
      const imageRef = firebase.storage().ref('applicants' + this.state.uid).child('profile_pic');

      console.log(this.state.avatar);
      RNFetchBlob.fs.readFile(this.state.avatar, 'base64')
        .then((data) => {
          return Blob.build(data, { type: `${mime};BASE64` })
        })
        .then((blob) => {
          uploadBlob = blob
          return imageRef.put(blob_ref, blob, { contentType: mime })
        })
        .then(() => {
          uploadBlob.close()
          return imageRef.getDownloadURL()
        })
        .then((url) => {
          resolve(url)
        })
        .catch((error) => {
          alert(error.message);
          reject(error);
      })
    })
  }

【问题讨论】：

通话时this.state.avatar的具体内容是什么？
@DougStevenson 它显示为 file:///storage/emulated/0/Android/data/com.jobsearch/files/Pictures/image-e4d88136-ac45-4f5b-81e3-f0d394343e59.jpg
这是 readFile 的有效路径吗？

标签： reactjs firebase react-native native firebase-storage

【解决方案1】：

使用 rn-fetch-blob 因为 react-native-fetch-blob 不再维护。我查看您的代码的猜测是您没有指定文件名，这将是路径。这是我如何从保存到文件系统的 png 中创建 FormData/Blob 的示例：

imageToFormData(filename: string): FormData {
    const data = new FormData();
    data.append('file', { uri: `file://${directory}/${filename}`, name: filename, type: 'image/png' });

    return data;
  }

因此，在您的代码中尝试按上述或以下方式构建您的 blob：

.then((data) => {
          return Blob.build(data, { name: ${filename}, type: `${mime};BASE64` })
        })

【讨论】：