React-Redux通过input标签上传图片后无法正常显示问题咨询

img标签的src属性仅可识别资源链接字符串（包括http/https链接、base64字符串、blob临时链接），你当前存在Redux状态里的是浏览器内存中的二进制File实例，无法直接被img标签解析，所以会显示破损。

方案1：生成Blob临时链接（性能最优，同会话有效） #

页面刷新后链接会失效，适合仅需单次会话内展示的场景，内存占用低。
修改上传的onChange逻辑即可：

<input 
      type="file"
      accept=".png,.jpeg"
      onChange={e => {
        const file = e.target.files[0]
        if (!file) return
        // 生成浏览器临时可访问的blob链接
        const tempImgUrl = URL.createObjectURL(file)
        dispatch(setProfileImage(tempImgUrl))
      }}
/>

其他组件直接通过useSelector拿到链接赋值给src即可正常显示。如果要优化性能，可在图片替换/组件卸载时调用URL.revokeObjectURL(tempImgUrl)释放内存，小型应用不处理也不会有明显影响。

方案2：转Base64字符串（可持久化，刷新不丢失） #

生成的Base64字符串可以存在localStorage甚至Redux状态里，页面刷新后依然可以正常显示，适合头像这类小尺寸图片场景。
修改onChange逻辑：

<input 
      type="file"
      accept=".png,.jpeg"
      onChange={e => {
        const file = e.target.files[0]
        if (!file) return
        const fileReader = new FileReader()
        fileReader.onload = () => {
          // 读取完成后拿到base64字符串
          dispatch(setProfileImage(fileReader.result))
        }
        fileReader.readAsDataURL(file)
      }}
/>

直接将读取到的Base64赋值给src即可正常显示。

如果后续需要数据永久存储、多用户访问，可以对接简单的后端接口：

• 前端把File对象封装进FormData，提交给后端的图片上传接口
• 后端将图片存储到服务器本地目录或云存储服务，返回图片的可访问公网http链接
• 前端把该http链接存在状态/数据库中，直接赋值给src即可使用

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