Reactjs 图像上载预览：window.URL.createObjectURL（）只工作一次

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

我听说过MediaSource（）api，但没有找到任何图像示例。这个代码有什么问题

导出默认函数ImageUploader（{id，onAdd，onRemove}）{
const[preview，setPreview]=useState（null）；
const onAddImage=（文件：file）=>{
window.URL.revokeObjectURL（预览）；
setPreview（window.URL.createObjectURL（文件））；
onAdd（id，文件）；
};
const onRemoveImage=（）=>{
window.URL.revokeObjectURL（预览）；
setPreview（空）；
onRemove（id）；
};
返回(
{预览？：
}
onAddImage（e.target.files[0]）}
/>
);
}

输入值不变，因此不会触发onChange函数。

---

您可以使用react

useRef

hooks api，分配给输入标记并清除

onRemoveImage

函数中的输入值。

您可以显示预览组件吗？它只是一个img标记：const preview=styled.img`对象适合：cover；边界半径：8px；`；问题不是从这里来的。我已经记录了预览，我可以看到它在第一次上传后不再更新。通过代码沙盒，使用与您的类似的最小代码，工作正常。我已经用一个完整的代码更新了沙盒：当你拖放或多次点击“上传”时，它在这里不起作用。我做了一些更改。现在检查你的沙盒。您没有使用预览组件。