手把手教你用React实现图片上传和展示功能

前言

随着互联网的飞速发展，图片已成为网络世界中不可或缺的一部分。在许多应用场景下，我们需要实现图片上传和展示功能。React作为当下流行的前端框架之一，自然也提供了相应的功能。本文将详细介绍如何在React中实现图片上传和展示功能，从文件选择器到上传按钮，从图片预览到文件类型验证，从Blob URL到FormData，再到上传进度条，应有尽有。

文件选择器

首先，我们需要创建一个文件选择器，以允许用户从他们的计算机中选择要上传的图片。我们可以使用<input type="file">元素来实现。

<input type="file" id="file-input" multiple accept="image/*">

在这里，multiple属性允许用户选择多个文件，accept属性则限制了用户只能选择图片文件。

上传按钮

接下来，我们需要创建一个上传按钮，以触发图片上传操作。我们可以使用<button>元素来实现。

<button type="button" id="upload-button">上传</button>

图片预览

在上传图片之前，我们通常需要先预览一下图片，以确保用户选择了正确的图片。我们可以使用FileReader API来实现图片预览。

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const files = e.target.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    const reader = new FileReader();

    reader.onload = (e) => {
      const img = document.createElement('img');
      img.src = e.target.result;

      document.body.appendChild(img);
    };

    reader.readAsDataURL(file);
  }
});

文件类型验证

在上传图片之前，我们还需要验证一下图片的文件类型，以确保用户上传的图片是正确的格式。我们可以使用accept属性来实现文件类型验证。

<input type="file" id="file-input" multiple accept="image/*">

在这里，accept属性的值为image/*，表示只允许用户上传图片文件。

Blob URL

在上传图片之前，我们需要将图片转换成Blob对象。Blob对象是二进制大对象（Binary Large Object）的缩写，它可以用来表示各种各样的数据，包括图片、视频、音频等等。

我们可以使用FileReader API将图片转换成Blob对象。

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const files = e.target.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    const reader = new FileReader();

    reader.onload = (e) => {
      const blob = new Blob([e.target.result], { type: file.type });

      // ...
    };

    reader.readAsArrayBuffer(file);
  }
});

FormData

在上传图片之前，我们需要将图片和相关数据封装成FormData对象。FormData对象是一种特殊的表单数据对象，它可以用来发送文件和文本数据。

我们可以使用以下代码将图片和相关数据封装成FormData对象。

const formData = new FormData();

formData.append('image', blob);
formData.append('name', '图片名称');
formData.append('description', '图片');

// ...

上传图片

最后，我们需要将FormData对象发送到服务器，以完成图片上传操作。我们可以使用XMLHttpRequest对象来实现图片上传。

const xhr = new XMLHttpRequest();

xhr.open('POST', '上传地址');

xhr.onload = (e) => {
  // ...
};

xhr.send(formData);

上传进度条

在图片上传过程中，我们可以使用XMLHttpRequest对象的onprogress事件来跟踪上传进度。

xhr.onprogress = (e) => {
  const progress = e.loaded / e.total * 100;

  // ...
};

总结

以上就是如何在React中实现图片上传和展示功能的详细介绍。希望本文能够对大家有所帮助。