当前位置：首页 > React

react实现文件预览

2026-01-26 19:22:16React

文件预览实现方法

在React中实现文件预览功能通常需要根据文件类型（如图片、PDF、视频等）选择不同的技术方案。以下是几种常见文件类型的预览实现方式：

图片预览

使用URL.createObjectURL生成临时URL显示本地选择的图片：

import { useState } from 'react';

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

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const objectUrl = URL.createObjectURL(file);
      setPreview(objectUrl);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {preview && <img src={preview} alt="预览" style={{ maxWidth: '100%' }} />}
    </div>
  );
}

PDF预览

使用react-pdf库实现PDF文件预览：

import { Document, Page } from 'react-pdf';
import { useState } from 'react';

function PDFPreview() {
  const [numPages, setNumPages] = useState(null);
  const [file, setFile] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

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

  return (
    <div>
      <input type="file" accept=".pdf" onChange={handleFileChange} />
      {file && (
        <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
          {Array.from(new Array(numPages), (el, index) => (
            <Page key={`page_${index + 1}`} pageNumber={index + 1} />
          ))}
        </Document>
      )}
    </div>
  );
}

视频预览

使用HTML5的video元素实现视频预览：

import { useState } from 'react';

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

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const objectUrl = URL.createObjectURL(file);
      setPreview(objectUrl);
    }
  };

  return (
    <div>
      <input type="file" accept="video/*" onChange={handleFileChange} />
      {preview && (
        <video controls width="100%" src={preview}>
          您的浏览器不支持视频预览
        </video>
      )}
    </div>
  );
}

通用文件预览方案

对于无法直接预览的文件类型（如docx、xlsx等），可以考虑使用第三方API或服务：

使用Microsoft Office Online Viewer嵌入预览
使用Google Docs Viewer嵌入预览
上传到云存储服务后获取预览链接

示例使用Google Docs Viewer：

function OfficePreview() {
  const [fileUrl, setFileUrl] = useState('');

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('file', file);

      // 这里应该是上传到服务器的逻辑
      // 假设返回了文件URL
      const response = await uploadToServer(formData);
      setFileUrl(response.fileUrl);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      {fileUrl && (
        <iframe 
          src={`https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`}
          width="100%" 
          height="500px"
          frameBorder="0"
        />
      )}
    </div>
  );
}