Как получить URI загруженного изображения - PullRequest
0 голосов
/ 19 ноября 2018

Я использую Firebase Storage для создания и отправки URL-адресов изображений в Firebase Storage Bucket.У меня это работает хорошо, когда у меня есть право на загрузку и установленный конфиг Firebase Storage.Но как я могу получить фактический URI из изображения и поместить его для просмотра?Я видел несколько возможных ответов на это в JS.Но не реагируют - родные.Вот мой код:

submitFormHandler = () => {
    console.log("FormHandler: " + this.state.message)
    let isFormValid = true;
    let dataToSubmit = {};
    const formCopy = this.state.form;

    var user = firebase.auth().currentUser;

    for (let key in formCopy) {
      isFormValid = isFormValid && formCopy[key].valid;
      dataToSubmit[key] = this.state.form[key].value;
    }

    if (isFormValid, user) {
      this.setState({
        loading: true
      });

      getTokens((value) => {
        const dateNow = new Date();
        const expiration = dateNow.getTime();
        const form = {
          ...dataToSubmit,
          uid: value[3][1]
        }

        if (expiration > value[2][1]) {
          this.props.autoSignIn(value[1][1]).then(() => {
            setTokens(this.props.User.userData, () => {

              this.props.addArticle(form, this.props.User.userData.token).then(() => {
                this.setState({ modalSuccess: true })
              })
            })
          })
        } else {
          this.props.addArticle(form, value[0][1]).then(() => {
            this.setState({ modalSuccess: true })
          })
        }
      })

    } else {
      let errorsArray = [];

      for (let key in formCopy) {
        if (!formCopy[key].valid) {
          errorsArray.push(formCopy[key].errorMsg)
        }
      }

      this.setState({
        loading: false,
        upload: true,
        hasErrors: true,
        modalVisible: true,
        errorsArray
      })
    }
  }

  showErrorsArray = (errors) => (
    errors ?
      errors.map((item, i) => (
        <Text key={i} style={styles.errorItem}> - {item}</Text>
      ))
      : null
  )

  clearErrors = () => {
    this.setState({
      hasErrors: false,
      modalVisible: false,
      errorsArray: []
    })
  }

  resetDenEventScreen = () => {
    const formCopy = this.state.form;

    for (let key in formCopy) {
      formCopy[key].valid = false;
      formCopy[key].value = "";
    }

    this.setState({
      modalSuccess: false,
      hasErrors: false,
      errorsArray: [],
      loading: false
    })

    this.props.resetArticle();

  }

URL-адрес изображения затем передается в Firebase и устанавливает его как ключ 'imageSource' и значение '.jpg'.С жестким кодированием это работает нормально, но только если у меня установлен URI для изображения, добавленного от пользователя (или папки в Firebase Storage).Я знаю, как Firebase Realtime Database назначит свой собственный идентификационный номер элементу, как в:

pickImage = () => {
    console.log('onPickImage');
    this.setState({ imageLoading: true });
    ImagePicker.showImagePicker(null, (response) => {
      console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
        this.setState({ imageLoading: false });
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
        this.setState({ imageLoading: false });
      } else {
        const source = {
          uri: response.uri,
          type: response.type,
        };
        this.setState({ localImageSource: source.uri });
      }
    });
  }

uploadImage(imageSource) {
    console.log("starting upload image...");
    return new Promise((resolve, reject) => {
      const uploadUri = Platform.OS === 'ios' ? imageSource.uri.replace('file://', '') : imageSource.uri;
      let uploadBlob = null;

      const imageRef = firebase.storage().ref('images/').child(imageSource.uri)
      fs.readFile(uploadUri, 'base64')
        .then((data) => {
          console.log("building blob...");
          return Blob.build(data, { type: '${mime};BASE64' });
        })
        .then((blob) => {
          uploadBlob = blob;
          console.log("uploading blob...");
          return imageRef.put(uploadUri, { contentType: imageSource.type });
        })
        .then(() => {
          uploadBlob.close();
          console.log("getting blob downloadUrl...");
          return imageRef.getDownloadURL();
        })
        .then((url) => {
          console.log('Image URL: ', url);
          console.log("resolving...")
          resolve(url);
        })
        .catch((error) => {
          console.log("rejecting promise..." + error);
          reject(error)
        });
      // this.handlePickedImage(pickerResult);
    });

  }

, где item.key генерируется Firebase, поэтому его не нужно жестко кодировать.Возможно ли добиться этого в Firebase Storage как для изображения, так и для «статьи»?И действительно ли мне нужно назначить новый ключ для добавления записи в хранилище Firebase, так как мобильное приложение загружает только URL в Firebase, и теперь мне нужно получить URI из изображения.

handlePickedImage = pickerResult => {
    try {
      this.setState({ uploading: true });

      if (!pickerResult.cancelled) {
        uploadUrl = awaituploadImage(pickerResult.uri);
        this.setState({ image: uploadUrl });
      }
    } catch (e) {
      console.log(e);
      alert('Upload failed, sorry : (');
    } finally {
      this.setState({ uploading: false });
    }
  };

  getImageLocal() {
    console.log('Attempting to get localImageSource: ' + this.state.localImageSource);
    if (this.state.localImageSource == null) {
      console.log("localImageSource was not available, aborting...");
      return;
    }
    return (
      <Image
        style={styles.imageStyle}
        source={{ uri: this.state.localImageSource }} />
    );
  }

  getImage() {
    console.log('Attempting to get imageSource: ' + this.state.imageSource);
    if (this.state.imageSource == null) {
      console.log("imageSource was not available, aborting...");
      return;
    }
    return (
      <Image
        style={styles.imageStyle}
        source={{ uri: this.state.imageSource }} />
    );
  }

Я знаю, что мне нужно поместить что-то вроде 'firebase.storage (). Ref (). GetDowloadUrl () "или это проще, чем добавить" form.image.value.getDownloadUrl () "и извините за вопрос" где "?Спасибо, я новичок и ищу много документации, но я не совсем понимаю, кого поставить или какую-то логику для работы ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...