Creé una API en el backend que almacenará imágenes en la base de datos, creé una función para cargar las imágenes pero obtengo una matriz vacía en mi base de datos.

Si me gusta de esta manera, está funcionando bien:

 <form action='http://localhost:5000/addProduct' method='post' encType='multipart/form-data'> <input type="file" name="images" multiple onChange={e => setImages(e.target.files)} accept="image/png , image/jpeg, image/webp" /> <div className=" py-3 text-right "> <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button> </div> </form>

Pero en lugar de acción, si creo una función para cargar archivos, obtuve una matriz vacía. En el respaldo recibo [object FileList]

 <form onSubmit={handleUploadImages }> <input type="file" name="images" onChange={setImages} multiple accept="image/png , image/jpeg, image/webp"/> <button type="submit">Publish</button> </form>

Esta es la función que creé. El problema es que creo que aquí formData.append('images', images.target.files) , creo que necesito enviar los archivos de una manera diferente pero confundido ¿Cómo puedo hacerlo?

 const [images, setImages] = useState<any>() const [data, setData] = useState() console.log(data); const handleUploadImages = (e: any) => { e.preventDefault() const formData = new FormData(); formData.append('images', images.target.files) // problem fetch('http://localhost:5000/addProduct', { method: 'post', body: formData }) .then(response => response.json()) .then(data => { if (data.insertedId) { alert('img Added') } }) .catch(error => { console.error('Error:', error); }); }