reactjs - 如何从 React.js 中的 firebase 获取文件

Question

我有使用 React.js 将图片上传到 firebase 的功能，我使用put方法将图像上传到 firebase，现在我需要从 firebase 下载该图片，你能帮我吗？我上传文件的代码是：

import React, { useState, useEffect } from 'react'
import { storage } from '../../firebase/firebase'

const Upload = () => {

    const [photo, setPhoto] = useState(null)
    const [url, setUrl] = useState(null)


    const imageChangeHandler = (event) => {
        setPhoto(event.target.files[0])
    }

    const fileUploadHandler = () => {

        const uploadTask = storage.ref(`image/${photo.name}`).put(photo);
        uploadTask.on(
            'state-changed',
            snapshot => { },
            error => {
                console.log(error);
            },
            () => {
                storage.ref('image').child(photo.name).getDownloadURL()
                    .then(url => {
                        setUrl(url)
                    })
            }
        )
    }

    return (
        <div className="upload-box">
            <div className="form-upload">
                <input onChange={imageChangeHandler} type="file" className="upload-input" />
                <button onClick={fileUploadHandler} type="submit" value="Send" className="upload-btn">Upload</button>
                <ul>
                    <li>
                        <img width="200px" height="200px" src={url} alt="firebase_uladed_image" />
                    </li>
                </ul>
            </div>
        </div>
    )
    }

     export default Upload

标签： reactjs

Answer 1

您需要使用 useEffect 从 firebase 获取图像，如下所示

useEffect(()=>{
   fetchApi
   setImage() 
}, [])