React+Ant Design实现图片上传至LocalStorage并刷新后留存

核心逻辑 #

LocalStorage仅支持存储字符串，因此需要将上传的图片转换为base64格式进行存储；页面刷新时，根据卡片的唯一标识从LocalStorage读取对应的base64字符串，再转回图片格式渲染到对应卡片中。

具体实现步骤 #

1. 改造UploadContent组件：完成图片存储 #

在图片上传成功后，将文件转为base64，关联卡片唯一ID（如cardId）存入LocalStorage，同时同步组件状态：

// UploadContent 组件内处理上传完成的函数
const handleUploadFinish = (file, cardId) => {
  const reader = new FileReader();
  reader.onload = function(e) {
    // 用卡片ID作为存储键的一部分，避免不同卡片数据冲突
    localStorage.setItem(`card_image_${cardId}`, e.target.result);
    // 更新组件内的图片状态（如果有维护状态的话）
    setCurrentImages(prev => ({ ...prev, [cardId]: e.target.result }));
  };
  reader.readAsDataURL(file);
};

2. 改造ContentCustom组件：初始化读取存储数据 #

在组件挂载阶段，根据自身的cardId从LocalStorage读取已存储的图片数据，初始化到组件状态：

// ContentCustom 组件内的初始化逻辑（以函数组件为例）
useEffect(() => {
  const savedImage = localStorage.getItem(`card_image_${props.cardId}`);
  if (savedImage) {
    setCardImage(savedImage); // 假设组件有管理图片的状态变量
  }
}, [props.cardId]);

3. 卡片内渲染图片 #

在ContentCustom的JSX中，直接使用存储的base64字符串作为图片的src属性：

// ContentCustom 组件的渲染部分
return (
  <div className="custom-card">
    {cardImage && <img src={cardImage} alt="用户上传图" className="card-img" />}
    {/* 卡片其他内容 */}
  </div>
);

4. 处理图片替换与删除 #

• 替换图片：直接覆盖LocalStorage中对应卡片ID的存储条目即可，逻辑与上传时一致
• 删除图片：移除LocalStorage中对应键值对，并清空组件状态

// 替换图片逻辑
const handleReplaceImage = (newFile, cardId) => {
  const reader = new FileReader();
  reader.onload = function(e) {
    localStorage.setItem(`card_image_${cardId}`, e.target.result);
    setCurrentImages(prev => ({ ...prev, [cardId]: e.target.result }));
  };
  reader.readAsDataURL(newFile);
};

// 删除图片逻辑
const handleRemoveImage = (cardId) => {
  localStorage.removeItem(`card_image_${cardId}`);
  setCurrentImages(prev => ({ ...prev, [cardId]: null }));
};

注意事项 #

• LocalStorage单域名存储上限约5MB，建议对上传图片做大小限制或压缩处理，避免存储失败
• 必须保证每个卡片有唯一的cardId，否则会出现不同卡片图片互相覆盖的问题
• 如果使用类组件，将上述useEffect逻辑替换为componentDidMount生命周期方法即可

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