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

这是我的代码如下：

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

现在我想将此图像存储在本地存储中并在另一侧显示它。所以我想将图像存储在本地存储中。我的代码位于图像上传功能内部。

我的功能是这样的：

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

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

首先，您应该意识到：

• LocalStorage只能存储字符串，因此您只能使用字符串表示形式存储文件（例如base64）
• LocalStorage 并不是真正为存储文件而设计的，因为浏览器只为您提供容量有限 https://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values/2989317

如果这确实是您想要实现的目标，那么解决方案如下：

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 https://jsfiddle.net/5pu1brag/