我很難把檔案放到firebase中，這樣我就可以檢索到它的getDownloadURL。
下面是我得到的結果
import React, {useState, useEffect}. from 'react'
import { Container, Button, 行, 列, 表格, 警報 } from 'react-bootstrap'/span>
import PageHeader from './components/PageHeader'
import { projectFirestore, projectStorage } from ' ./firebase/config'
const Dashboard = (/span>) => {
const [ error, setError] = useState(' ')
const [ name, setName ] = useState("")
const [ link, setLink ] = useState(""/span>)
const [ file, setFile ] = useState(null)
const [ desc, setDesc ] = useState(""/span>)
const [ projects, setProjects ] = useState([] )
const [ url, setUrl ] = useState(""/span>)
const [ message, setMessage ] = useState(""/span>)
useEffect(() => {
projectFirestore.collection（'projects'）。 onSnapshot((snapshot) => {
const tempProject = [] 。
snapshot.forEach(span class="hljs-params">doc =>{
tempProject.push({...doc.data(), id: doc.id}) 。
})
setProjects(tempProject)
})
}, [])
const onNameChange = (e) => { setName（e. target.value) }
const onLinkChange = (e) => { setLink（e. target.value) }
const onDescChange = (e) => { setDesc（e。 target.value) }
const handleSubmit = async（e）=> {
e.preventDefault()
try {
setMessage(''/span>)
setError('')
if(!name){
回傳。
}
const storageRef = projectStorage.ref()
const fileRef = storageRef.child(file.name)
await fileRef.put(file)
setUrl(fileRef.getDownloadURL()
projectFirestore.collection('projects')
.doc( name, link, url, desc )
.set({ name, link, url, desc })
setMessage('Project added succesfully')
setName(')
setLink(''/span>)
setFile(null)
setDesc(''/span>)
} catch {
setError('project fail to add')
}
}
return (
<div className="">
<Container>/span>
<PageHeader title="Dashboard" />
<Row>
<Col xs={12}>
<h4>添加專案</h4>
{message&& <Alert variant="success"> {message}</Alert> }。
{error && <Alert variant="danger"/span>> {error}</Alert> }
<Form onSubmit={handleSubmit}> }
<Row>
< Col xs={12} lg={8}>/span>
<Form.Group className="mb-3"/span>>
<Form.Label>/span>Name</Form.Label>
<Form.Control
type="text"/span>
value={name}
onChange={onNameChange}/>
</Form.Group>/span>
<Form.Group className="mb-3">
<Form.Label>/span>Description</Form.Label>
<Form.Control
as="textarea"
rows={5}
value={desc}
onChange={onDescChange}/>
</Form.Group>/span>
<Form.Group className="mb-3">
<Form.Label>/span>Link</Form.Label>
<Form.Control
type="text"/span>
value={link}
onChange={onLinkChange} />
</Form.Group>
</Col>/span>
< Col xs={12} lg={4}>/span>
<Form.Group className="mb-3"/span>>
<Form.Label>/span>Image</Form.Label>
<Form. 控制 type="file" onChange={（e） => setFile（e.target.files[0]） }/>
</Form.Group>
<div>/span>
{projects.map(project => (
<div key={project. id} to={`/${project.id}`}>
<img src={project. url} alt={project.name} />
<h5>{project.name}</h5>
</div>/span>
))}
</div> ))。
</Col>/span>
</Row>/span>
<div className="d-flex justify-content-end" >
<Button variant="primary" type="submit"> 發送</按鈕>。
</Div>/span>
</Form>/span>
</Col>/span>
</Row>/span>
</Container>/span>
</div>
)
}
export default Dashboard
uj5u.com熱心網友回復：
這段代碼看起來很好，但我想添加一些驗證，并檢查一個檔案是否真的被用戶選中。doc()方法需要一個字串作為documentID。此外，getDownloadURL()回傳一個承諾。試著將代碼重構為：
const handleSubmit = async（e）=> {
e.preventDefault()
try {
setMessage(''/span>)
setError('')
if(!name){
回傳。
}
if (!file) {
console.log("No file selected"/span>)
return。
}
console.log("開始上傳檔案")
const storageRef = projectStorage.ref()
const fileRef = storageRef.child(file.name)
await fileRef.put(file)
console.log("File uploaded")
const fileUrl = await fileRef.getDownloadURL()
console.log(fileUrl)
setUrl(fileUrl)
await projectFirestore.collection('projects')
.doc("some_document_id")
.set({ name, link, url: fileUrl, desc })
setMessage('Project added succesfully')
setName(')
setLink(''/span>)
setFile(null)
setDesc(''/span>)
} catch {
setError('project fail to add')
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/332552.html
標籤：