const multerStorage = multer.diskStorage({ destination: (req, file, cb) =>{ cb(null, '../client/public/uploadImg' ) }, filename : (req, file, cb) => { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9) cb(null, file.fieldname + '-' + uniqueSuffix + '_' + file.originalname) }})
Una vez que le di un nombre único a mi archivo y lo guardé en la carpeta uploadImg, ahora necesito capturar el nombre del archivo para poder buscarlo en mi lado del cliente.
{usrs.map((alldata, i)=>( <div key={i} > <img src={`/uploadImg/${alldata.photo}`} alt="..." /> <h1> {alldata.name}</h1> <h3> {alldata.photo} </h3> </div> ))}En algún momento, su lado del cliente está realizando una solicitud HTTP (que supongo que es una solicitud Ajax) para cargar la imagen.
Eso será manejado por algún código del lado del servidor. Aquí está el ejemplo de la documentación :
const multer = require('multer') const upload = multer({ dest: './public/data/uploads/' }) app.post('/stats', upload.single('uploaded_file'), function (req, res) { // req.file is the name of your file in the form above, here 'uploaded_file' // req.body will hold the text fields, if there were any console.log(req.file, req.body) });
Debe enviar el valor de req.file (o más bien una URL derivada de él) en la respuesta que realice a la solicitud de Ajax.
Dado que su código del lado del cliente usa JSX, supondré que está usando React.js.
El código del lado del cliente debe prestar atención a esa respuesta y almacenar el resultado en el estado .
A continuación, puede leer el valor del estado al renderizar el componente.