Question

我正在开发一个React应用程序，它将Excel数据读入JSON对象。我有一个表单元素输入类型文件，它会在更改后从xlsx文件加载JSON数据。现在，我想将文件详细信息（而非文件数据）保存到本地存储中，以便以后可以使用这些详细信息读取文件。

反应代码

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from "axios";

function App() {



let handleOnClick=function(event){
  console.log(event.target.files[0]);
  let data=new FormData();
  data.append("selectedFile",event.target.files[0]);
  axios
        .post("http://localhost:4001/upload",data)
        .then(res=>{
          console.log(res["data"]);
    });



    localStorage.setItem("selectedFile",event.target.files[0]);
    let selectedFile=localStorage.getItem("selectedFile");
    let data2=new FormData();
    data2.append("selectedFile",selectedFile);

    axios.post("http://localhost:4001/upload",data2)
    .then(res=>{
      console.log(res);
    })
}


  return (
    <form>
      <input type="file" onChange={handleOnClick}/>
    </form>
  );
}

export default App;

上面的代码工作正常，可以为Form变量Data加载数据，但不能为Data2加载

任何人都可以帮忙进行此操作

预先感谢

Answer 1

localStorage允许您存储字符串，并且仅存储字符串。您不能在用户磁盘上存储对文件的引用。

event.target.files[0]不是字符串，因此您将存储从其上隐式调用toString()所得到的所有信息。

您可以从选取的文件中存储的唯一信息是该文件的内容，该信息需要您通过{读取，该信息随后会在Ajax请求中发送并发送给Ajax请求。 {1}}并转换为字符串（因此，如果您最初不是文本文件，则可能需要对它进行base64编码）。请注意，您可能会达到存储限制。

Answer 2

在javascript中，我们可以在键值对中的本地存储中设置值

用于设置：-

localStorage.lname=document.getElementById("lname").value;

要检索：-

document.getElementById("lname").innerHTML=localStorage.lname

如何将表单元素文件存储到本地存储中

反应代码

2 个答案: