ReactJS中无法渲染Firebase存储的PDF/XML等文件问题

你遇到的问题核心是：所有文件都通过<img>标签渲染，但<img>仅支持图片格式（如JPG、PNG、SVG），PDF、XML这类非图片文件用<img>加载时，浏览器无法解析，就会显示乱码占位图。

解决思路 #

针对不同类型的文件，使用对应的渲染方式：

• 图片格式：继续用<img>标签
• PDF：使用<embed>或<object>标签嵌入，或者提供下载/在线打开链接
• XML/文本类：可以用<pre>标签展示内容，或者提供下载链接

修改后的代码示例 #

下面是调整后的完整代码，会根据文件类型选择渲染方式：

import "./App.css";
import { useState, useEffect } from "react";
import {
  ref,
  uploadBytes,
  getDownloadURL,
  listAll,
  getMetadata
} from "firebase/storage";
import { storage } from "./firebase";
import { v4 } from "uuid";

function App() {
  const [fileUpload, setFileUpload] = useState(null);
  const [fileList, setFileList] = useState([]); // 存储文件的url和类型信息

  const filesListRef = ref(storage, "Files/");

  // 上传文件时同时记录文件类型
  const uploadFile = () => {
    if (!fileUpload) return;
    const fileRef = ref(storage, `Files/${fileUpload.name + v4()}`);
    uploadBytes(fileRef, fileUpload, {
      contentType: fileUpload.type // 显式设置文件MIME类型，方便后续获取
    }).then((snapshot) => {
      Promise.all([getDownloadURL(snapshot.ref), getMetadata(snapshot.ref)]).then(([url, metadata]) => {
        setFileList(prev => [...prev, { url, type: metadata.contentType }]);
      });
    });
  };

  // 加载已上传的文件时获取元数据中的类型
  useEffect(() => {
    listAll(filesListRef).then((response) => {
      const filePromises = response.items.map(item => 
        Promise.all([getDownloadURL(item), getMetadata(item)]).then(([url, metadata]) => ({
          url,
          type: metadata.contentType
        }))
      );
      Promise.all(filePromises).then(files => setFileList(files));
    });
  }, []);

  // 根据文件类型渲染对应的元素
  const renderFile = (file) => {
    // 图片类型
    if (file.type.startsWith("image/")) {
      return <img key={file.url} src={file.url} alt="Uploaded file" style={{ maxWidth: "300px", margin: "10px" }} />;
    }
    // PDF类型
    else if (file.type === "application/pdf") {
      return (
        <div key={file.url} style={{ margin: "10px" }}>
          <h4>PDF文件:</h4>
          <embed 
            src={file.url} 
            type="application/pdf" 
            width="500px" 
            height="600px"
          />
          <a href={file.url} target="_blank" rel="noopener noreferrer" style={{ display: "block", marginTop: "10px" }}>
            在线打开PDF
          </a>
        </div>
      );
    }
    // XML或文本类型
    else if (file.type.startsWith("text/") || file.type === "application/xml") {
      return (
        <div key={file.url} style={{ margin: "10px" }}>
          <h4>{file.type === "application/xml" ? "XML文件" : "文本文件"}:</h4>
          <a href={file.url} download style={{ display: "block", marginBottom: "10px" }}>
            下载文件
          </a>
          <iframe 
            src={file.url} 
            style={{ width: "100%", height: "300px", border: "1px solid #ccc" }}
            title="Text content"
          />
        </div>
      );
    }
    // 其他未知类型，提供下载链接
    else {
      return (
        <div key={file.url} style={{ margin: "10px" }}>
          <h4>未知类型文件:</h4>
          <a href={file.url} download>下载文件</a>
        </div>
      );
    }
  };

  return (
    <div className="App">
      <input 
        id="input"
        type="file"
        onChange={(event) => {
          setFileUpload(event.target.files[0]);
        }}
      />
      <button id="button" onClick={uploadFile}> 上传文件</button>
      <div className="file-container">
        {fileList.map(file => renderFile(file))}
      </div>
    </div>
  );
}

export default App;

关键修改点说明 #

1. 变量名优化：将imageUpload、imageUrls改为更通用的fileUpload、fileList，适配所有文件类型
2. 存储文件类型信息：上传时通过uploadBytes的第三个参数设置contentType，加载时通过getMetadata获取文件的MIME类型，用于后续判断渲染方式
3. 新增渲染逻辑：renderFile函数根据文件的MIME类型，选择对应的标签渲染：
   • 图片用<img>
   • PDF用<embed>嵌入展示，同时提供在线打开链接
   • 文本/XML用<iframe>展示内容，提供下载链接
   • 未知类型直接提供下载链接
4. 路径修正：原代码中上传路径是Files/，但加载时读取的是images/，这里统一改为Files/避免加载不到已上传的文件

内容的提问来源于stack exchange，提问作者Lamda Function