如何在React状态中存储src文件夹内的图片？附报错求助

错误原因 #

你导入的logo是Webpack打包后生成的URL字符串（格式类似/static/media/logo.xxxx.png），并不是后端需要的File对象。当你把这个字符串塞进FormData传给后端时，后端接收不到合法的文件对象，尝试读取originalname属性时自然会抛出Cannot read properties of undefined错误。

解决方案 #

要上传本地导入的图片，需要先把它转换成File对象，再通过FormData传递：

方案1：转换本地导入图片为File对象 #

通过fetch请求图片URL，将响应转为Blob后包装成File：

import logo from "../src/pictures/logo.png";
import { useState, useEffect } from "react";

const StoreImage = () => {
  const [file, setFile] = useState(null);

  // 组件挂载时完成图片转换
  useEffect(() => {
    const convertToFile = async () => {
      const response = await fetch(logo);
      const blob = await response.blob();
      // 创建File对象，第二个参数为文件名，对应后端读取的originalname
      const imageFile = new File([blob], "logo.png", { type: blob.type });
      setFile(imageFile);
    };
    convertToFile();
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!file) return;
    
    const formData = new FormData();
    formData.append("Image", file);
    // 此处添加你的上传请求逻辑，例如：
    // fetch('/your-upload-api', { method: 'POST', body: formData })
  };

  return (
    <form onSubmit={handleSubmit} encType="multipart/form-data">
      <input type="submit" value="Submit" disabled={!file} />
    </form>
  );
};

export default StoreImage;

方案2：用户自主选择图片上传（更常用场景） #

如果你的需求是让用户自己选择本地图片，直接通过input[type="file"]获取File对象即可：

import { useState } from "react";

const StoreImage = () => {
  const [file, setFile] = useState(null);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!file) return;
    
    const formData = new FormData();
    formData.append("Image", file);
    // 执行上传请求
  };

  return (
    <form onSubmit={handleSubmit} encType="multipart/form-data">
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <input type="submit" value="Submit" disabled={!file} />
    </form>
  );
};

export default StoreImage;

关键提醒 #

后端报错的核心是未收到合法的File对象，只要确保FormData中append的是标准的File/Blob对象，后端就能正常读取originalname（对应File对象的文件名）。

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