通过 react-redux 中的 input 标签上传和显示图像文件

Posted 2023-03-22

【中文标题】通过 react-redux 中的 input 标签上传和显示图像文件

【英文标题】：Upload and display image file through via input tag in react-redux

【发布时间】：2021-12-31 21:42:37

【问题描述】：

我在上传单个图像的组件中有一个输入标签。

<input 
      type="file"
      accept=".png,.jpeg"
      onChange=e => dispatch(setProfileImage(e.target.files[0]))
/>

据我所知，在我发送一个动作并通过减速器将其保存到状态后，图像会保存在状态中。

我的问题是这样的：在另一个组件中，我通过 useSelector 访问状态下的图像并将其用作图像标签中的源，但图像出现损坏。 基本上，我只是希望能够将状态中保存的图像作为图像标签的来源。

非常感谢任何解释、教程或链接。我试图避免使用后端，因为我正在处理的应用程序非常小，不需要后端，但如果这是最简单的答案，我愿意。

谢谢！

【参考方案1】：

为图片创建一个url，把它放在img标签的src中：

   const ImageUrl =  URL.createObjectURL(file);

或

<img src=URL.createObjectURL(file)  alt=file.name />

【讨论】：

我需要导入任何东西还是仅仅这样做就足够了？

是的，我编辑了我的答案。它可能会对你有所帮助。

***.com/questions/38049966/…查看更多