React：巧妙实现多文件上传组件，告别传统束缚

前端

2023-10-05 17:11:05

前言：摆脱传统束缚

在现代Web开发中，文件上传已成为一项必不可少的任务。然而，传统的HTML文件上传元素存在诸多限制，例如：

缺乏自定义样式
无法预览已选文件
难以处理多个文件上传

这些限制极大地影响了用户体验，阻碍了开发者充分发挥其创造力。React的出现为我们提供了摆脱传统束缚，构建更加灵活、美观的文件上传组件的契机。

巧用React：构建自定义组件

React的组件化机制使我们能够轻松构建可重用的自定义组件。在我们的多文件上传组件中，我们将使用以下核心概念：

状态管理 (useState) ：用于管理组件的内部状态，包括选中的文件列表。
事件处理 (onChange) ：用于侦听文件选择事件并更新组件状态。

深入剖析：实现多文件上传

以下是实现多文件上传组件的关键步骤：

创建文件选择器 (input) ：使用<input type="file" multiple>创建文件选择器，它允许用户选择多个文件。
事件处理 (onChange) ：添加onChange事件处理函数来侦听文件选择事件。
更新状态 (useState) ：在onChange函数中，使用useState更新组件状态，将选中的文件添加到文件列表中。
渲染文件列表 ：使用map函数渲染选中的文件列表，显示文件名和文件大小等信息。

示例代码：

import React, { useState } from 'react';

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

  const handleChange = (e) => {
    setFiles([...selectedFiles, ...e.target.files]);
  };

  return (
    <>
      <input type="file" multiple onChange={handleChange} />
      <ul>
        {selectedFiles.map((file) => (
          <li key={file.name}>{file.name} - {file.size} bytes</li>
        ))}
      </ul>
    </>
  );
};

export default FileUpload;