如何使用 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

上传文件的一种实现方式，在后端使用Java 和使用blob Blobstore 的Google App Engine。首先尝试在按钮中调用一个发送文件名的函数：

<input id="btn-chooseImage" className="btn-file"
       onChange={() => this.handleUploadSession()}

之后，在backend中调用get函数保存上传的文件并保存为img state进行渲染。

Js：

handleUploadImg(redirectAction){
     var file = $('#btn-chooseImage')[0].files[0]
     var formData = new FormData();
     formData.append("uploaded_files", file);
     var request = new XMLHttpRequest();
     request.open("POST", redirectAction, true);
     request.send(formData);
     request.onload = function() {
         if (request.status === 200) {
             var response = JSON.parse(request.responseText);
             this.setState({
                 img: '/serve?blob-key=' +response.blobKey.toString()
             });
         }
     }.bind(this);
};

handleUploadSession(){
    var request = new XMLHttpRequest();
    request.open("GET", "/uploadSession");
    request.send();
    request.onload = function () {
        if(request.status === 200){
            var redirectAction = JSON.parse(request.responseText);
            this.handleUploadImg(redirectAction);
        }
    }.bind(this);
}

Java：

@RequestMapping(value = {"/uploadSession"}, method = RequestMethod.GET)
protected void GetUploadSession(HttpServletRequest request,
                                    HttpServletResponse response) throws IOException {

    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
    String redirectAction = blobstoreService.createUploadUrl("/myView");

    String json = new Gson().toJson(redirectAction);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

Answer 2

首先，您应该知道：

• Lo​​calStorage 只能存储字符串，因此您可以仅使用字符串表示形式存储文件（如 base64）
• Lo​​calStorage 并不是真正用于存储文件的，因为浏览器只提供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