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

Answer 2

使用后端的Java和使用blob Google App Engine的{{1}}上传文件的一种实现。首先尝试调用发送文件名的按钮中的函数：

Blobstore

之后，请调用<input id="btn-chooseImage" className="btn-file" onChange={() => this.handleUploadSession()}中的get功能保存上传的文件并另存为backend进行渲染。

JS：

img state

爪哇：

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);
}

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

2 个答案: