reactjs - 图片上传预览：window.URL.createObjectURL() 只工作一次

Question

我有一个在 React 应用程序中从头开始构建的图像上传器。图像预览 - 感谢 window.URL.createObjectURL() - 仅在第一次工作。我认为这是因为内存问题，所以我在每次图像更改之前添加了 window.URL.revokeObjectURL() 。它仍然不起作用。

我听说过 MediaSource() api，但我没有找到任何图像示例。这段代码有什么问题？

export default function ImageUploader({id, onAdd, onRemove}) {
  const [preview, setPreview] = useState(null);

  const onAddImage = (file: File) => {
    window.URL.revokeObjectURL(preview);
    setPreview(window.URL.createObjectURL(file));
    onAdd(id, file);
  };
  const onRemoveImage = () => {
    window.URL.revokeObjectURL(preview);
    setPreview(null);
    onRemove(id);
  };

  return (
    <div>
      {preview ? <Preview src={preview} alt={id} /> : 
       <Icon icon="upload" />
      }
      <input
        type="file"
        accept="image/png, image/jpeg"
        onChange={(e) => onAddImage(e.target.files[0])}
      />
    </div>
  );
}

Answer 1

输入值没有改变，所以它不会触发 onChange 函数。您可以使用 react useRefhooks api 并分配给输入标签并清除onRemoveImage函数内的输入值。