react实现文件

2026-01-26 12:53:20React

实现文件上传功能

在React中实现文件上传功能可以通过HTML的<input type="file">元素结合React的状态管理来实现。以下是一个基本实现方法：

import React, { useState } from 'react';

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

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

  const handleUpload = () => {
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('file', selectedFile);

    fetch('YOUR_UPLOAD_ENDPOINT', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Upload error:', error));
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      {selectedFile && <p>Selected file: {selectedFile.name}</p>}
    </div>
  );
}

export default FileUpload;

实现文件下载功能

要实现文件下载，可以使用<a>标签的download属性或通过Blob对象创建下载链接：

function FileDownload() {
  const handleDownload = () => {
    fetch('YOUR_FILE_URL')
      .then(response => response.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'filename.ext';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      });
  };

  return (
    <button onClick={handleDownload}>Download File</button>
  );
}

实现文件预览功能

对于常见的文件类型如图片、PDF等，可以直接在React组件中预览：

function FilePreview({ file }) {
  const [previewUrl, setPreviewUrl] = useState('');

  useEffect(() => {
    if (!file) return;

    const reader = new FileReader();
    reader.onloadend = () => {
      setPreviewUrl(reader.result);
    };
    reader.readAsDataURL(file);
  }, [file]);

  return (
    <div>
      {file && file.type.startsWith('image/') && (
        <img src={previewUrl} alt="Preview" style={{ maxWidth: '100%' }} />
      )}
      {file && file.type === 'application/pdf' && (
        <embed src={previewUrl} width="100%" height="500px" type="application/pdf" />
      )}
    </div>
  );
}

处理大文件上传

对于大文件上传，可以考虑分片上传：

async function uploadLargeFile(file) {
  const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE);

  for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
    const start = chunkNumber * CHUNK_SIZE;
    const end = Math.min(start + CHUNK_SIZE, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkNumber', chunkNumber);
    formData.append('totalChunks', totalChunks);
    formData.append('originalFilename', file.name);

    await fetch('YOUR_CHUNK_UPLOAD_ENDPOINT', {
      method: 'POST',
      body: formData,
    });
  }
}