我是React.js的新手, 我正在尝试将图像上传到Firebase存储,成功上传后,我试图同时将downloadURL推送到Firestore。怎么做?这是其中“上传图片”工作正常但firestore无法正常工作的代码。
import React, {useState, Component} from 'react';
import firebase from "../firebase";
const storage = firebase.storage();
class ImageUpload extends Component {
constructor(props) {
super(props);
this.state = {
image: null,
url: '',
progress: 0
}
this.handleChange = this
.handleChange
.bind(this);
this.handleUpload = this.handleUpload.bind(this);
}
handleChange = e => {
if (e.target.files[0]) {
const image = e.target.files[0];
this.setState(() => ({image}));
}
}
handleUpload = () => {
const {image} = this.state;
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on('state_changed',
(snapshot) => {
// progrss function ....
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
this.setState({progress});
},
(error) => {
// error function ....
console.log(error);
},
() => {
// complete function ....
storage.ref('images').child(image.name).getDownloadURL().then(url => {
console.log(url);
this.setState({url});
// **************************这部分不起作用(开始)*********** **********************
const [imgURL, setImgURL] = useState('')
firebase
.firestore()
.collection('notes')
.add({
imgURL
})
.then(() => {
setImgURL('')
})
// ********************************这部分不起作用(END)******* *************************
})
});
}
render() {
return (
<div>
<progress value={this.state.progress} max="100"/>
<br/>
<input type="file" onChange={this.handleChange}/>
<button onClick={this.handleUpload}>Upload</button>
<br/>
<img src={this.state.url || 'http://via.placeholder.com/400x300'} alt="Uploaded images" height="300" width="400"/>
</div>
)
}
}
export default ImageUpload;
答案 0 :(得分:4)
要将下载URL写入数据库,您无需将其存储在状态中。您可以直接在then
处理程序中将其写入数据库:
storage.ref('images').child(image.name).getDownloadURL().then(url => {
firebase
.firestore()
.collection('notes')
.add({
imgURL: url
})
.then(() => {
setImgURL('')
})
});
答案 1 :(得分:0)
confing.js
import firebase from 'firebase/app'
import "firebase/firestore";
import "firebase/storage";
const firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXXXX.firebaseapp.com",
databaseURL: "https://XXXX-app-web.firebaseio.com",
projectId: "XXXX",
storageBucket: "XXXX-app-web.appspot.com",
messagingSenderId: "XXXXXX",
appId: "1:XXX:web:XXXX",
measurementId: "G-XXXX"
};
firebase.initializeApp(firebaseConfig);
export const firestore = firebase.firestore();
export const storageRef = firebase.storage();
export default firebase;
Button.js
import React from 'react';
import {firestore,storageRef} from './Config';
import Card from './Components/Card';
import {Fab, Grid} from '@material-ui/core';
import {Add} from '@material-ui/icons';
function guidGenerator() {
const S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
export default function MediaCard(props) {
const fileUpload = (e) => {
const file = e.target.files[0];
console.log("FileName", file)
const uploadTask = storageRef.ref('All_Files/').child(file.name).put(file);
uploadTask.on('state_changed',
(snapshot) => {
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
},
(error) => {
// Handle unsuccessful uploads
console.log("error:-", error)
},
() => {
const uniId = guidGenerator().toString();
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
console.log('File available at', downloadURL);
firestore.collection("All_Files").doc(uniId).set({
file_name: file.name.toString(),
id: uniId,
download_url: downloadURL.toString()
})
.then(() => {
console.log("Document successfully written!");
})
.catch((error) => {
console.error("Error writing document: ", error);
});
});
}
);
return (
<>
<div>
<Fab
color="primary"
aria-label="add"
style={{position: "fixed", bottom: "30px", right: "50px"}}
>
<input hidden className={classes.input} id="icon-button-file" onChange={fileUpload} type="file"/>
<label htmlFor="icon-button-file" style={{height: "24px"}}>
<Add/>
</label>
</Fab>
</div>
</>
);
}