在firebase存储中上传图像反应网络 - Javascript(1)

📌 相关文章

📜 在firebase存储中上传图像反应网络 - Javascript(1)

📅 最后修改于: 2023-12-03 15:07:53.111000 🧑 作者: Mango

在firebase存储中上传图像反应网络 - Javascript

Firebase存储是一个云存储服务，可以让开发人员轻松地存储和获取用户生成的内容，如图像、音频和视频。本文将介绍如何使用Javascript在Firebase存储中上传图像，并使用反应网络来显示已上传的图像。

步骤1：在Firebase中启用存储

首先，需要在Firebase中启用存储。打开Firebase控制台，并转到存储部分。按照指示启用存储，并设置适当的规则以保护存储。

步骤2：安装Firebase和React

在代码中使用Firebase和React，我们需要先安装它们。您可以使用npm或yarn进行安装。

npm install firebase react

或者

yarn add firebase react

步骤3：设置Firebase配置

在代码中使用Firebase之前，需要设置Firebase配置。打开Firebase控制台，进入项目设置，选择“添加应用程序”并选择“网页”，然后在提供的信息中找到您的Firebase配置。

将配置添加到您的React应用程序中。

import firebase from 'firebase'

const firebaseConfig = {   // 从Firebase console获取
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
  measurementId: '...',
}

firebase.initializeApp(firebaseConfig)

步骤4：创建组件

创建一个React组件，用于处理图像上传和在反应网络中显示图像。

import React, { useState } from 'react'
import firebase from 'firebase'

const ImageUpload = () => {
  const [image, setImage] = useState(null)

  const onImageChange = e => {
    if (e.target.files[0]) {
      setImage(e.target.files[0])
    }
  }

  const onImageUpload = () => {
    const storageRef = firebase.storage().ref(`images/${image.name}`)
    const uploadTask = storageRef.put(image)
    uploadTask.on(
      'state_changed',
      snapshot => {},
      error => {
        console.error(error)
      },
      () => {
        uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
          console.log('File available at', downloadURL)
          setImage(null)
        })
      }
    )
  }

  return (
    <div>
      <input type="file" onChange={onImageChange} />
      <button onClick={onImageUpload}>Upload</button>
    </div>
  )
}

export default ImageUpload

该组件使用useState钩子来存储图像。当用户选择要上传的图像时，onImageChange函数将更新状态以包含所选图像。onImageUpload函数将图像上传到Firebase存储。一旦完成，它将从存储中检索URL，并将其打印到控制台，然后将状态重置以准备接受下一个图像上传。

步骤5：创建图像列表

现在可以创建一个新的组件来显示上传的图像。我们将使用React组件来创建一个反应网络，以在网格中显示每个图像。

import React, { useEffect, useState } from 'react'
import firebase from 'firebase'

const ImageList = () => {
  const [imageList, setImageList] = useState([])

  useEffect(() => {
    const storageRef = firebase.storage().ref()
    storageRef
      .child('images')
      .listAll()
      .then(images => {
        const promises = images.items.map(imageRef =>
          imageRef.getDownloadURL()
        )
        Promise.all(promises).then(urls => {
          setImageList(urls)
        })
      })
      .catch(error => console.error(error))
  }, [])

  return (
    <div>
      {imageList.length > 0 ? (
        <div className="image-grid">
          {imageList.map(imageUrl => (
            <div key={imageUrl} className="image-item">
              <img src={imageUrl} alt="" />
            </div>
          ))}
        </div>
      ) : (
        <div>No images found.</div>
      )}
    </div>
  )
}

export default ImageList

此组件首先使用useState钩子来存储所有上传的图像的URL。 useEffect钩子用于在组件加载时检索所有图像的URL。这段代码按名称使用child函数过滤存储桶中的所有图像，然后调用getDownloadURL函数以检索图像的URL。一旦我们拥有所有图像的URL，我们使用React createElements函数来为每个图像创建图像元素。

步骤6：渲染组件

使用ImageUpload和ImageList组件，可以创建一个包含图像上传和图像列表的组件。提供以下代码：

import React from 'react'
import firebase from 'firebase'
import ImageUpload from './ImageUpload'
import ImageList from './ImageList'

const App = () => {

  return (
    <div className="app-container">
      <h1>Firebase Image Uploader</h1>
      <ImageUpload />
      <ImageList />
    </div>
  )
}

export default App

此代码创建一个顶级组件，其中包含ImageUpload和ImageList组件。ImageUpload组件用于上传图像，ImageList组件用于显示上传的图像。

Markdown代码片段

以下是包含完整代码的Markdown代码片段：

## 在firebase存储中上传图像反应网络 - Javascript

Firebase存储是一个云存储服务，可以让开发人员轻松地存储和获取用户生成的内容，如图像、音频和视频。本文将介绍如何使用Javascript在Firebase存储中上传图像，并使用反应网络来显示已上传的图像。

### 步骤1：在Firebase中启用存储

首先，需要在Firebase中启用存储。打开Firebase控制台，并转到存储部分。按照指示启用存储，并设置适当的规则以保护存储。

### 步骤2：安装Firebase和React

在代码中使用Firebase和React，我们需要先安装它们。您可以使用npm或yarn进行安装。

```bash
npm install firebase react

或者

yarn add firebase react