如何使用 ReactJS 上传图像并预览它？

在许多网站和应用程序中，用户往往需要上传图像。ReactJS 是一种流行的 JavaScript 库，可以用于构建前端应用程序。在 ReactJS 中，我们可以使用一些工具来上传图像并预览它。在本文中，我们将讨论如何使用 ReactJS 来实现这个过程。

使用 ReactJS 来上传图像

首先，我们需要向用户显示一个上传图像的表单。在 ReactJS 中，我们可以使用 <input> 标签和 type="file" 属性来实现这一点。当用户选择要上传的图像时，我们需要将其发送到服务器上的相应端点。在这个例子中，我们将使用一个名为 axios 的工具。

import React from 'react'
import axios from 'axios'

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

  const onChange = event => {
    setImage(event.target.files[0])
  }

  const onSubmit = async event => {
    event.preventDefault()

    const formData = new FormData()
    formData.append('image', image)

    await axios.post('/api/upload-image', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    setImage(null)
  }

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="image">Image</label>
        <input
          type="file"
          id="image"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
      </div>
      <button type="submit">Upload Image</button>
    </form>
  )
}

export default ImageUpload

在这个例子中，我们首先使用 React.useState() 钩子来创建一个名为 image 的状态变量。当用户上传图像时，我们将该图像存储在 image 变量中。用户可以使用 .png、.jpg 或 .jpeg 文件格式上传图像。

当用户单击“Upload Image”按钮时，我们会触发 onSubmit 函数。该函数创建一个 FormData 对象，并将 image 添加到该对象中。然后，我们使用 axios.post() 方法将该对象发送到服务器上的 /api/upload-image 端点。

使用 ReactJS 来预览图像

在许多情况下，我们希望在用户上传图像后立即预览该图像。在 ReactJS 中，我们可以使用 URL.createObjectURL() 方法创建一个可以用于预览图像的 URL。

import React from 'react'

const ImageUpload = () => {
  const [image, setImage] = React.useState(null)
  const [previewUrl, setPreviewUrl] = React.useState(null)

  const onChange = event => {
    const file = event.target.files[0]
    const imageUrl = URL.createObjectURL(file)

    setImage(file)
    setPreviewUrl(imageUrl)
  }

  const onSubmit = event => {
    event.preventDefault()

    const formData = new FormData()
    formData.append('image', image)

    // ...
  }

  return (
    <form onSubmit={onSubmit}>
      <div>
        {previewUrl && <img src={previewUrl} alt="Preview" />}
        <label htmlFor="image">Image</label>
        <input
          type="file"
          id="image"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
      </div>
      <button type="submit">Upload Image</button>
    </form>
  )
}

export default ImageUpload

在这个例子中，我们使用 React.useState() 钩子创建了一个名为 previewUrl 的新状态变量。当用户上传图像时，我们使用 URL.createObjectURL() 方法创建一个图像的 URL，并将该 URL 存储在 previewUrl 变量中。然后，我们使用 <img> 标签和 src 属性来显示该图片。

结论

在本文中，我们讨论了如何使用 ReactJS 来上传图像并预览它。我们学习了如何使用 <input> 标签和 type="file" 属性来创建上传图像的表单，如何使用 FormData 和 axios 来将图像传递到服务器，并如何使用 URL.createObjectURL() 方法来预览图像。我们希望这篇文章对您有所帮助！