Estoy realizando una actualización donde, además de otros datos, necesito enviar a Node una matriz que incluye la información de una o más imágenes, pero solo su ruta e ID, no la imagen en sí.
Estoy realizando una actualización donde, además de otros datos, necesito enviar a Node una matriz que incluye la información de una o más imágenes para eliminar, pero solo paso su ruta y ID, no la imagen en sí ya que el las imágenes están en Cloudinary.
Uso formData porque entre estos datos envío las nuevas imágenes por si se requieren nuevas, pero recibo todos los datos menos las imágenes a borrar, ya que en vez de recibir un array solo recibo [Object Object] y no puedo trabajar con eso. Este es mi código:
const putProduct = async (productToUpdate, filesToDelete) => { console.log(filesToDelete) // Array const formData = new FormData() const imageArr = Array.from(productToUpdate.pictures) imageArr.forEach(image => { formData.append('pictures', image) }) formData.append('filesToDelete', filesToDelete) formData.append('barCode', productToUpdate.barCode) try { const dataOnLs = localStorage.getItem('cmtjs') const config = { headers: { "Content-Type": "multipart/form-data", apiKey: dataOnLs } } const { data } = await axiosClient.put(`/products/${productToUpdate.id}`, formData, config )
Recibo en Node y paso por la consola req.body.filesToDelete pero siempre indica [Object Object]
let updateProduct = async ( req, res = response ) => { const filesToDelete = req.body.filesToDelete; console.log(filesToDelete); // [object Object] return
FormData requiere que los objetos sean cadenas. Aquí están los reemplazos:
Interfaz
Reemplazar:
formData.append('filesToDelete', filesToDelete)
Con:
formData.append('filesToDelete', JSON.stringify(filesToDelete))
back-end
Reemplazar:
const filesToDelete = req.body.filesToDelete
Con:
const filesToDelete = JSON.parse(req.body.filesToDelete)
Debe tratar la matriz filesToDelete
de la misma manera que trata productToUpdate.pictures
.
Si desea que filesToDelete
aparezca como una matriz en req.body.filesToDelete
, use esto...
filesToDelete.forEach((f) => { formData.append("filesToDelete", f); });
Multer maneja automáticamente los campos repetidos como una matriz. Opcionalmente, puede agregar []
al nombre del campo para mayor claridad en su código...
formData.append("filesToDelete[]", f);
pero el resultado será el mismo.
En el lado del cliente, puede eliminar el encabezado de tipo de contenido. Su navegador manejará esto automáticamente por usted.