Estoy enviando varias imágenes a una API, pero la forma en que lo hago las envía como un objeto, pero necesito enviarlas como una URL.
Estado:
const [files, setFiles] = useState([]);Cargador de imágenes:
const fileSelectHandler = (e) => { setFiles([...files, ...e.target.files]); }; <input type="file" className="form-control" id="customFile" multiple onChange={fileSelectHandler} />Paquete de envío esperado:
"pic": [ { "url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg" }, { "url": "760634d2-f8ec-4caa-9a2d-14a8828cfb5dpetplace.jpg" } ]Puedes resolverlo así:
import React from "react"; export default function App() { const [files, setFiles] = React.useState([]); const fileSelectHandler = (e) => { const [file] = e.target.files; setFiles([...files, { url: file.name }]); }; const picObj = { pic: files }; console.log(picObj); return ( <div className="App"> <input type="file" className="form-control" id="customFile" multiple onChange={fileSelectHandler} /> </div> ); }Aquí un enlace a la demostración: https://codesandbox.io/s/immutable-pine-2k8t9?file=/src/App.js:0-625