使用ReactJS上传图片并保存到本地存储的方法是什么？

Question

这是我的代码示例：

代码如下：

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

现在我想将这个图片存储在本地并在另一个位置显示它。因此，我想将该图片存储在本地存储中。我的代码位于图片上传函数内。

我的函数如下：

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

我的控制台输出类似于C:\fakepath\user-bg.jpg

- Akib

---

https://dev59.com/DGIk5IYBdhLWcg3wiuqk - Prakash Sharma

同样使用了它，但是出现了错误，如 ctx.drawImage(img, 0, 0);。 - Akib

你所说的本地存储是指浏览器的 localStorage 吗？ - trk

是的，我指的是浏览器的本地存储 @82Tuskers - Akib

@Akib 那么 Prakash Sharma 发布的第一个链接绝对是你想要查看的东西。 - trk

Answer 1

首先，你应该知道：

• LocalStorage只能存储字符串，因此你只能使用字符串表示法（例如base64）来存储文件
• LocalStorage并不是为了存储文件而设计的，因为浏览器仅提供有限的容量

如果这确实是你想要实现的内容，这里有解决方案：

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

- Sebastien Lorber

---

谢谢你的代码，Sebastien。我该如何将其转换回图像对象数据？ - Eazy

Answer 2

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

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

- Angel Cuenca