React 组件库：终极指南

前端

2024-01-08 12:56:41

React 组件库：打造定制化文件上传组件

组件设计

在构建文件上传组件之前，清晰的组件设计至关重要。组件的功能和行为应明确定义：

功能：
- 选择文件
- 上传文件
- 显示上传进度
- 处理上传成功或失败
行为：
- 用户可通过点击按钮或拖放选择文件
- 允许多文件选择
- 上传完成后提供上传成功/失败信息
- 用户可取消上传

组件实现

以以下步骤着手组件实现：

创建组件： 建立一个新的 React 组件。
添加组件代码： 使用以下代码实现组件功能：

import React, { useState } from "react";

const FileUpload = () => {
  const [files, setFiles] = useState([]);

  const handleSelectFiles = (event) => {
    setFiles(event.target.files);
  };

  const handleUploadFiles = () => {
    const formData = new FormData();

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

    fetch("/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <div>
      <input type="file" multiple onChange={handleSelectFiles} />
      <button onClick={handleUploadFiles}>Upload Files</button>
    </div>
  );
};

export default FileUpload;