能否仅用React将用户图片存储至public文件夹？MERN作业求助

你的代码仅实现了图片的即时预览，但浏览器环境下的前端代码没有权限直接写入项目的public文件夹——React运行在用户浏览器中，无法访问服务器端（或本地开发环境）的文件系统。要满足“存储图片”的需求，只能在客户端层面实现，比如用localStorage或IndexedDB保存图片数据。

以下是修改后的代码，实现上传图片后转成Base64字符串存入localStorage，并在页面加载时恢复已存储的图片：

import { useEffect, useState } from "react";

export default function App() {
  const [imageSrc, setImageSrc] = useState(null);

  // 页面加载时读取本地存储的图片
  useEffect(() => {
    const savedImage = localStorage.getItem("uploadedImage");
    if (savedImage) {
      setImageSrc(savedImage);
    }
  }, []);

  // 处理文件上传与存储
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      const base64Str = event.target.result;
      // 将Base64字符串存入localStorage
      localStorage.setItem("uploadedImage", base64Str);
      setImageSrc(base64Str);
    };
    // 把图片文件转成Base64格式
    reader.readAsDataURL(file);
  };

  // 清除已存储的图片
  const clearImage = () => {
    localStorage.removeItem("uploadedImage");
    setImageSrc(null);
  };

  return (
    <div style={{ padding: "20px" }}>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {imageSrc && (
        <div style={{ marginTop: "20px" }}>
          <img src={imageSrc} alt="已上传图片" style={{ maxWidth: "300px" }} />
          <button onClick={clearImage} style={{ marginTop: "10px" }}>
            清除图片
          </button>
        </div>
      )}
    </div>
  );
}

• Base64转换：通过FileReader将图片文件转为Base64字符串，适配localStorage仅能存储字符串的特性
• 持久化效果：页面刷新后，会自动从localStorage读取并显示之前保存的图片
• 局限性：localStorage有5MB左右的容量限制，不适合存储大尺寸图片；若需存储多图或大文件，建议改用IndexedDB（更适合二进制数据存储）

如果导师明确要求将图片写入项目的public文件夹，仅靠前端React无法实现——这需要后端代码（如Node.js）处理文件写入操作。但题目限定“不使用后端或数据库”，因此客户端层面的存储方案是唯一符合要求的实现方式。

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