react实现文件导入

2026-01-27 00:54:36React

使用React实现文件导入

在React中实现文件导入通常涉及使用HTML的<input type="file">元素，并结合React的状态管理来处理用户选择的文件。以下是实现文件导入的几种常见方法：

基础文件上传

通过<input type="file">捕获用户选择的文件，并使用onChange事件处理文件数据。

import React, { useState } from 'react';

function FileUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    if (selectedFile) {
      console.log('Uploading file:', selectedFile.name);
      // 这里可以添加文件上传逻辑，例如调用API
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

export default FileUpload;

拖放文件上传

使用HTML5的拖放API实现更友好的文件上传体验。

import React, { useState, useCallback } from 'react';

function DragDropUpload() {
  const [isDragging, setIsDragging] = useState(false);
  const [selectedFile, setSelectedFile] = useState(null);

  const handleDragEnter = (e) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragging(false);
    setSelectedFile(e.dataTransfer.files[0]);
  };

  return (
    <div
      onDragEnter={handleDragEnter}
      onDragOver={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      style={{
        border: isDragging ? '2px dashed blue' : '2px dashed gray',
        padding: '20px',
        textAlign: 'center',
      }}
    >
      {selectedFile ? (
        <p>Selected file: {selectedFile.name}</p>
      ) : (
        <p>Drag and drop a file here</p>
      )}
    </div>
  );
}

export default DragDropUpload;

文件预览

在文件上传前显示文件的预览内容，例如图片或文本文件。

import React, { useState } from 'react';

function FilePreview() {
  const [preview, setPreview] = useState('');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {preview && (
        <div>
          {preview.includes('image') ? (
            <img src={preview} alt="Preview" style={{ maxWidth: '100%' }} />
          ) : (
            <p>File content: {preview}</p>
          )}
        </div>
      )}
    </div>
  );
}

export default FilePreview;

多文件上传

支持用户一次选择多个文件并上传。

import React, { useState } from 'react';

function MultiFileUpload() {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (e) => {
    setSelectedFiles([...e.target.files]);
  };

  const handleUpload = () => {
    selectedFiles.forEach((file) => {
      console.log('Uploading:', file.name);
      // 这里可以添加文件上传逻辑
    });
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload All</button>
      <ul>
        {selectedFiles.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MultiFileUpload;