手撸React组件「Upload」文件上传

前端

2024-01-16 11:28:11

今天想分享一下我最近在封装一个名为「Upload」的React组件时的一些想法和思考。这个组件的主要目的是提供一种简单、可定制的文件上传功能，以便轻松地集成到任何React项目中。

组件的设计

1. 功能需求

支持单文件和多文件上传。
支持拖拽上传。
上传进度可视化。
上传成功或失败时的回调函数。
可定制的UI样式。

2. 组件结构

整个组件可以分为三个主要部分：

上传按钮： 这是用户点击或拖拽文件以启动上传过程的地方。
文件列表： 这是显示已选择文件的区域。
进度条： 这是在文件上传时显示进度的地方。

3. 实现原理

该组件的核心是HTML5 File API，它提供了一组用于处理文件的API。这些API允许我们读取文件、获取文件信息（如大小和类型）以及将文件发送到服务器。

组件的使用

使用这个组件非常简单，只需要在项目中安装它，然后在你的React组件中导入它。接下来，你就可以在你的组件中使用<Upload/>组件了。

import Upload from 'react-upload-component';

const MyComponent = () => {
  return (
    <Upload
      onUpload={(files) => {
        // 在这里处理上传的文件
      }}
      onError={(error) => {
        // 在这里处理上传错误
      }}
      maxFileSize={1000000} // 1MB
      allowedFileTypes={['image/*', 'video/*']} // 允许的文件类型
      multiple={true} // 是否允许多文件上传
      dragAndDrop={true} // 是否允许拖拽上传
      render={({
        getRootProps,
        getInputProps,
        isDragActive,
        files,
        progress,
        error,
      }) => (
        <div className="upload-container">
          <div
            {...getRootProps()}
            className={`upload-button ${isDragActive ? 'drag-active' : ''}`}
          >
            <input {...getInputProps()} />
            <span>选择文件</span>
          </div>
          <ul className="file-list">
            {files.map((file) => (
              <li key={file.name}>
                <span>{file.name}</span>
                <span>{file.size} bytes</span>
              </li>
            ))}
          </ul>
          <div className="progress-bar">
            <div
              className="progress-bar-fill"
              style={{ width: `${progress}%` }}
            />
          </div>
          {error && <div className="error-message">{error}</div>}
        </div>
      )}
    />
  );
};

export default MyComponent;