React项目File Input报错：URL scheme 'c'不支持求助

你遇到的错误和Webpack配置无关，核心原因是浏览器的安全机制：出于隐私保护，file类型输入框不会返回真实本地文件路径，只会返回c:\fakepath\...这种伪路径。而p5.js的loadImage会尝试用这个伪路径发起网络请求，自然会触发"URL scheme 'c' is not supported"的错误——浏览器不允许直接访问本地文件系统的URL。

下面是具体的修复步骤：

1. 修复Input组件的文件处理逻辑 #

原来的updateSettings直接存储了输入框的value（也就是伪路径），对文件上传来说完全没用。我们需要提取文件对象，生成浏览器可访问的临时URL：

export default function Input({ type = "number", name, value, key }) {
  const { updateSettings } = useSettingsStore();

  const handleChange = (e) => {
    if (type === "file") {
      const file = e.target.files[0];
      if (file) {
        // 生成浏览器可访问的临时URL
        const objectURL = URL.createObjectURL(file);
        updateSettings({ name, value: objectURL });
      }
    } else {
      // 普通输入框沿用原有逻辑
      updateSettings(e);
    }
  };

  return (
    <StyledLabel>
      <StyledInput
        type={type}
        onChange={handleChange}
        // file输入框的value是只读的，无需绑定传入的value
        {...(type !== "file" && { value })}
      />
      {name}
    </StyledLabel>
  );
}

2. 调整Store的updateSettings方法 #

确保Store能兼容普通输入框和文件输入的两种传参形式：

// 示例Store逻辑，根据你的实际代码调整
const useSettingsStore = create((set) => ({
  settings: {},
  updateSettings: (payload) => {
    if (payload.target) {
      // 普通输入框：从event对象提取name和value
      const { name, value } = payload.target;
      set((state) => ({
        settings: { ...state.settings, [name]: value }
      }));
    } else {
      // 文件输入：直接接收name和生成的objectURL
      const { name, value } = payload;
      set((state) => ({
        settings: { ...state.settings, [name]: value }
      }));
    }
  }
}));

3. 优化Canvas组件的图片加载逻辑 #

现在Store里存储的是有效的临时URL，loadImage可以正常加载。同时要记得在组件卸载时释放临时URL，避免内存泄漏：

import { useEffect } from 'react';
import Sketch from 'react-p5'; // 假设你用react-p5渲染p5组件

export default function Canvas() {
  let tileWidth;
  let img;
  const settings = useSettingsStore();
  const image = useSettingsStore(state => state.image);
  const { canvasSize, bgColor, tiles } = settings;

  // 组件卸载时释放临时URL
  useEffect(() => {
    return () => {
      if (image) {
        URL.revokeObjectURL(image);
      }
    };
  }, [image]);

  const preload = p => {
    if (image) {
      img = p.loadImage(image);
    }
  };

  const setup = (p, canvasParentRef) => {
    p.createCanvas(canvasSize.w, canvasSize.h).parent(canvasParentRef);
    p.strokeCap(p.SQUARE);
    p.pixelDensity(4);
  };

  const draw = p => {
    if (!img && image) {
      img = p.loadImage(image);
    }
    if (!img) return; // 无图片时跳过后续逻辑，避免报错

    img.resize(p.width, p.height);
    p.background(bgColor);
    tileWidth = p.width / tiles;
    for (let y = 0; y < tiles; y++) {
      for (let x = 0; x < tiles; x++) {
        let c = img.get(x * tileWidth, y * tileWidth);
        let b = p.brightness(c);
        borderRadiusRaster(p, x, y, b);
      }
    }
  };

  return <Sketch preload={preload} setup={setup} draw={draw} />;
}

关于Webpack配置的说明 #

你配置的file-loader是用来处理项目打包阶段的静态资源（比如src目录下的本地图片）的，和用户上传的本地文件没有关系，所以不需要修改Webpack配置。

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