Я использую 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 () "и извините за вопрос" где "?Спасибо, я новичок и ищу много документации, но я не совсем понимаю, кого поставить или какую-то логику для работы ...