交互完整的React拖拽上传组件，120行代码即可实现！

2024-01-04 17:36:46

正文

如今，随着互联网的发展，文件上传已成为一项非常常见的功能。在React项目中，实现拖拽上传功能是一种非常流行且用户友好的方式。相比于传统的上传方式，拖拽上传更加直观、便捷，能够提升用户体验。

React Hooks 简介

在介绍如何构建拖拽上传组件之前，我们先来简单了解一下React Hooks。React Hooks是React 16.8版本引入的一项重要特性，它允许我们在函数组件中使用状态和其他React特性。这使得函数组件更加强大，并且可以与类组件媲美。

构建拖拽上传组件

接下来，我们将使用React Hooks构建一个交互完整的拖拽上传组件。该组件主要包括以下几个功能：

拖拽上传：用户可以将文件直接拖拽到组件区域进行上传。
多文件上传：组件支持同时上传多个文件。
实时进度条：组件会显示文件上传的实时进度。
上传完成提示：当文件上传完成后，组件会显示上传完成的提示信息。

代码实现

import React, { useState, useEffect, useRef } from "react";

const DragAndDrop = () => {
  const [files, setFiles] = useState([]);
  const [progress, setProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    const handleDragOver = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const handleDrop = (e) => {
      e.preventDefault();
      e.stopPropagation();

      const files = e.dataTransfer.files;
      setFiles(files);
    };

    document.addEventListener("dragover", handleDragOver);
    document.addEventListener("drop", handleDrop);

    return () => {
      document.removeEventListener("dragover", handleDragOver);
      document.removeEventListener("drop", handleDrop);
    };
  }, []);

  const handleChange = (e) => {
    const files = e.target.files;
    setFiles(files);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    setIsUploading(true);

    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append("files", files[i]);
    }

    fetch("/upload", {
      method: "POST",
      body: formData,
      onprogress: (e) => {
        const progress = Math.round((e.loaded / e.total) * 100);
        setProgress(progress);
      },
    })
      .then((response) => {
        setIsUploading(false);
        alert("上传成功！");
      })
      .catch((error) => {
        setIsUploading(false);
        alert("上传失败！");
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="file"
          multiple
          ref={inputRef}
          onChange={handleChange}
          hidden
        />
        <div
          className="drop-area"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          {files.length > 0 ? (
            <ul>
              {files.map((file, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          ) : (
            <p>将文件拖拽到此区域或点击选择文件</p>
          )}
        </div>
        <button type="submit" disabled={isUploading}>
          {isUploading ? "正在上传..." : "上传"}
        </button>
        {isUploading && (
          <div className="progress-bar">
            <div
              className="progress"
              style={{ width: `${progress}%` }}
            ></div>
          </div>
        )}
      </form>
    </div>
  );
};

export default DragAndDrop;