react实现预览

实现文件预览功能

在React中实现文件预览功能通常涉及多种文件类型（如图片、PDF、视频等）的处理。以下是几种常见文件类型的预览方法：

图片预览

使用URL.createObjectURL将上传的图片文件转换为可预览的URL：

const [previewUrl, setPreviewUrl] = useState('');

const handleImageChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    setPreviewUrl(url);
  }
};

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

PDF预览

使用第三方库如react-pdf实现PDF预览：

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

const [pdfUrl, setPdfUrl] = useState(null);
const [numPages, setNumPages] = useState(null);

const handlePdfChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    setPdfUrl(url);
  }
};

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

视频预览

使用HTML5的<video>标签预览视频：

const [videoUrl, setVideoUrl] = useState('');

const handleVideoChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    setVideoUrl(url);
  }
};

return (
  <div>
    <input type="file" accept="video/*" onChange={handleVideoChange} />
    {videoUrl && (
      <video controls width="100%" src={videoUrl} />
    )}
  </div>
);

通用文件预览

对于无法直接预览的文件类型（如.docx、.xlsx等），可以显示文件信息：

const [fileInfo, setFileInfo] = useState(null);

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    setFileInfo({
      name: file.name,
      type: file.type,
      size: (file.size / 1024).toFixed(2) + ' KB'
    });
  }
};

return (
  <div>
    <input type="file" onChange={handleFileChange} />
    {fileInfo && (
      <div>
        <p>Name: {fileInfo.name}</p>
        <p>Type: {fileInfo.type}</p>
        <p>Size: {fileInfo.size}</p>
      </div>
    )}
  </div>
);

使用第三方预览组件

考虑使用react-file-viewer等库实现更全面的预览功能：

import FileViewer from 'react-file-viewer';

const [fileUrl, setFileUrl] = useState('');
const [fileType, setFileType] = useState('');

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    setFileUrl(url);
    setFileType(file.type.split('/')[1]); // 提取文件扩展名
  }
};

return (
  <div>
    <input type="file" onChange={handleFileChange} />
    {fileUrl && (
      <FileViewer
        fileType={fileType}
        filePath={fileUrl}
        onError={(e) => console.error('Error:', e)}
      />
    )}
  </div>
);

注意事项

• 使用URL.revokeObjectURL()释放内存，可在组件卸载时调用：

  useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    };
  }, [previewUrl]);

• 对于大文件，考虑使用文件分片或流式处理
• 服务端文件预览需要额外处理，通常通过返回文件URL实现