javascript - 如何使用 ReactJS 上传图片并保存到本地存储？

Question

我的代码如下:

<input 
 type="file" 
 id="imageFile" 
 name='imageFile' 
 onChange={this.imageUpload} />

现在我想将这张图片存储在本地存储中并在另一端显示。所以我想将图像存储在本地存储中。我的代码在图片上传功能中。

我的函数是这样的:

imageUpload(e) {
    console.log(e.target.value);
}

我的控制台打印像 C:\fakepath\user-bg.jpg

Answer 1

首先，你应该知道:

• LocalStorage 只能存储字符串，因此您可以仅使用字符串表示形式(如 base64)存储文件
• LocalStorage 并不是真正为存储文件而设计的，因为浏览器只为您提供 limited capacity

如果这真的是你想要实现的，这里是解决方案:

class Hello extends React.Component {

  imageUpload = (e) => {
      const file = e.target.files[0];
      getBase64(file).then(base64 => {
        localStorage["fileBase64"] = base64;
        console.debug("file stored",base64);
      });
  };

  render() {
    return <input 
     type="file" 
     id="imageFile" 
     name='imageFile' 
     onChange={this.imageUpload} />;
  }
}


const getBase64 = (file) => {
  return new Promise((resolve,reject) => {
     const reader = new FileReader();
     reader.onload = () => resolve(reader.result);
     reader.onerror = error => reject(error);
     reader.readAsDataURL(file);
  });
}

JsFiddle