Отсутствует аргумент «путь» при загрузке изображения в хранилище React Native

Question

Я пытаюсь разрешить пользователю загружать изображение в базу данных Firebase в реальном времени. Я использовал оба «rn-fetch-blob» и «response-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»

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);
      })
    })
  }

Answer 1

Используйте rn-fetch-blob, так как response-native-fetch-blob больше не поддерживается.Я думаю, глядя на ваш код, вы не указываете имя файла, который будет путь.Вот пример того, как я создаю свой FormData / Blob из png-файла, сохраненного в файловой системе:

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` })
        })