图片上传预览：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 useRef hooks api 并分配给输入标签并清除 onRemoveImage 函数内的输入值。

图片上传预览：window.URL.createObjectURL() 只有效一次

image upload preview: window.URL.createObjectURL() only works once

file-upload

input

reactjs

createobjecturl