如何使用React Hooks将选中的图片存储到Local Storage解决刷新丢失问题

架构老林

2026-10-5

问题根源

你当前使用URL.createObjectURL()生成的是指向浏览器内存中本地文件的临时链接，该链接的生命周期仅和当前页面会话绑定，页面刷新/关闭后就会被浏览器自动回收失效，哪怕你将这个链接字符串存在LocalStorage中，下次加载时地址也已经无效，所以图片无法正常显示。

解决方法

将选中的图片文件转换为Base64格式的字符串再存入LocalStorage，Base64是纯文本格式可直接持久化存储，读取后可直接作为图片src的值加载。

只需要修改PersonalDetails.js中的onChangePicture方法即可，修改后代码如下：

const onChangePicture = e => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;
  // 用FileReader将文件转成Base64
  const fileReader = new FileReader();
  fileReader.onload = (loadEvent) => {
    const base64Image = loadEvent.target.result;
    setPicture(base64Image);
  };
  fileReader.readAsDataURL(selectedFile);
};