使用React将文件上传到Firebase Firestore可以通过以下步骤完成:
npm install firebase
import firebase from 'firebase/app';
import 'firebase/firestore';
componentDidMount() {
const firebaseConfig = {
// Firebase配置信息
};
firebase.initializeApp(firebaseConfig);
}
class FileUploadForm extends React.Component {
constructor(props) {
super(props);
this.state = {
file: null,
};
}
handleFileChange = (event) => {
this.setState({
file: event.target.files[0],
});
}
handleUpload = () => {
const { file } = this.state;
const storageRef = firebase.storage().ref();
const fileRef = storageRef.child(file.name);
fileRef.put(file)
.then(() => {
console.log('File uploaded successfully');
})
.catch((error) => {
console.error('Error uploading file:', error);
});
}
render() {
return (
<div>
<input type="file" onChange={this.handleFileChange} />
<button onClick={this.handleUpload}>Upload</button>
</div>
);
}
}
handleUpload = () => {
const { file } = this.state;
const storageRef = firebase.storage().ref();
const fileRef = storageRef.child(file.name);
fileRef.put(file)
.then((snapshot) => {
return snapshot.ref.getDownloadURL();
})
.then((downloadURL) => {
const firestore = firebase.firestore();
firestore.collection('files').add({
name: file.name,
url: downloadURL,
});
console.log('File uploaded successfully');
})
.catch((error) => {
console.error('Error uploading file:', error);
});
}
class FileList extends React.Component {
constructor(props) {
super(props);
this.state = {
files: [],
};
}
componentDidMount() {
const firestore = firebase.firestore();
firestore.collection('files').get()
.then((querySnapshot) => {
const files = [];
querySnapshot.forEach((doc) => {
files.push(doc.data());
});
this.setState({ files });
})
.catch((error) => {
console.error('Error getting files:', error);
});
}
render() {
const { files } = this.state;
return (
<ul>
{files.map((file) => (
<li key={file.name}>
<a href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
</li>
))}
</ul>
);
}
}
通过以上步骤,你可以使用React将文件上传到Firebase Firestore,并在React组件中显示已上传的文件列表。请注意,这里的示例代码中使用了Firebase的Storage和Firestore功能,你可以根据实际需求调整代码。
领取专属 10元无门槛券
手把手带您无忧上云