0
183
VistasCómo leer el contenido del archivo json cargado en reaccionar / next.js
Mi usuario cargará un archivo json con este botón (ver más abajo)
Luego tomaré este archivo json y pasaré su contenido a una variable (o estado).
let fileRef = useRef(); const uploadHandler = async () => { await fileRef.click(); }; useEffect(() => { fileRef.addEventListener("change", () => { const file = fileRef.files[0]; console.log(file); }); }, []);Mi console.log se ve así,
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Mediante el uso de materia gris
import matter from "gray-matter"; // set directory const directory = path.join(process.cwd(), "src", "data", "uploads"); export function getJsonData(fileName) { // assuming that fileName has extension too const filePath = path.join(directory, `${fileName}`); const fileContent = fs.readFileSync(filePath, "utf-8"); // data is the metadata const { data, content } = matter(fileContent); console.log("data",data) console.log("content",content) }
·
Juan Pablo Isaza
Denunciar
0
Necesita una entrada de archivo y un controlador de eventos onChange para la entrada, de modo que cuando el usuario cargue un archivo, use un nuevo FileReader para leerlo.
import React, { useState } from "react"; export function Upload({ children }) { const [fileContent, setFileContent] = useState(""); let fileRef = useRef(); const readFile = event => { const fileReader = new FileReader(); const { files } = event.target; fileReader.readAsText(files[0], "UTF-8"); fileReader.onload = e => { const content = e.target.result; console.log(content); setFileContent(JSON.parse(content)); }; }; return ( <> <input ref={fileRef} type="file" onChange={readFile} /> <button onClick={()=>fileRef.current.click()}>Upload<button/> </> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta