三种方法的React文件上传思想的一次实践

2023-12-12 11:43:43

前言

文件上传是前端开发中常见的需求，React 作为目前流行的前端框架，也提供了多种文件上传的解决方案。在本文中，我们将介绍三种不同的 React 文件上传思想，并通过示例代码来演示如何使用它们。

三种思想的React文件上传

思想一：使用 `<input type="file">`

最简单的方法是使用 HTML <input type="file"> 元素。这种方法简单易用，但也有其局限性。例如，它不支持文件拖拽，也不支持多文件上传。

import React, { useState } from "react";

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

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

  return (
    <div>
      <input type="file" onChange={handleChange} multiple />
      <ul>
        {files.map((file) => (
          <li key={file.name}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

思想二：使用 FileReader

FileReader API 允许你在客户端读取文件的内容。这种方法比使用 <input type="file"> 元素更灵活，因为它支持文件拖拽和多文件上传。

import React, { useState } from "react";

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

  const handleDrop = (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    setFiles(files);
  };

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

  return (
    <div>
      <div onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
        Drop files here
      </div>
      <input type="file" onChange={handleChange} multiple />
      <ul>
        {files.map((file) => (
          <li key={file.name}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

思想三：使用 Blob 和 URL

Blob API 允许你创建包含二进制数据的对象。URL API 允许你将 Blob 对象转换为 URL。这种方法与使用 FileReader API 类似，但它更适合于处理大型文件。

import React, { useState } from "react";

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

  const handleDrop = (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    setFiles(files);
  };

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

  return (
    <div>
      <div onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
        Drop files here
      </div>
      <input type="file" onChange={handleChange} multiple />
      <ul>
        {files.map((file) => {
          const blob = new Blob([file], { type: file.type });
          const url = URL.createObjectURL(blob);
          return <li key={file.name}><a href={url}>{file.name}</a></li>;
        })}
      </ul>
    </div>
  );
};

export default App;