0
147
Vistasreq.file no está definido al cargar la imagen desde el front-end
Revisé otra publicación similar pero aún no funciona: me da indefinido cuando console.log. También definí el middleware multer de acuerdo con otras publicaciones, así que no sé qué sucedió. Pero cuando subo una imagen a través del cartero, funciona con la devolución de un 201 como se esperaba. ¡Cualquier ayuda es apreciada!
Función ReactJS:
const UploadImageToBackend = async () => { console.log(UploadedImage) //UploadedImage is something like /Users/.../.jpg let formData = new FormData() formData.append('profile', {name : new Date() + "_profile", uri: UploadedImage, type:'image/jpg'}) try{ const res = await client.post('/upload-avatar',formData, { headers:{ Accept : 'application/json', authorization: 'JWT some JWT' }, }) console.log(res.data) }catch(error){ console.log(error.response.data) //gives "Error while uploading Image, try after some time" error } }Rutas de fondo:
const fileFilter = (req,file,callback) => { if (file.mimetype.startsWith('image')){ callback(null,true) }else{ callback('invalid image file', false) } } const storage = multer.diskStorage({}) const uploads = multer({storage, fileFilter}) router.post('/upload-avatar',isAuth, uploads.single('profile'),uploadProfile)función de carga de backend (a Cloudinary)
exports.uploadProfile = async (req,res)=>{ const user = req.user if (!user){ return res.status(401).json({success:false,message:"unauthorized access!"}) }else{ console.log(req.file.path) //undefined try{ const upload_result = await cloudinary.uploader.upload(req.file.path, { public_id: `${user._id}_profile`, width:500, height:500, crop: 'fill' }) await User.findByIdAndUpdate(user._id, {avatar: upload_result.url}) res.status(201).json({success:true,message: "Profile picture successfully uploaded"}) }catch (error){ res.status(500).json({success:false,message: "Error while uploading Image, try after some time"}) } } }1 Respuestas
Responde la pregunta0
cree esta función (para cargar en Cloudinary), por ejemplo, " lib/cloudinary.js " y agregue este código:
import cloudinary from "cloudinary"; cloudinary.config({ cloud_name: "YOUR_CLOUD_NAME", api_key: "YOUR_API_KEY", api_secret: "YOUR_API_SECRET", }); const upload = {}; upload.subir = async (file) => { try { const res = await cloudinary.uploader.upload(file); // return the secure url return res.secure_url; } catch (error) { return error; } } export default upload;Ahora en su controlador, por ejemplo, agregue este código, no olvide instalar express-fileupload:
import cloudinary from "../lib/cloudinary.js"; const upload = {}; upload.uploadProfile = async (req, res) => { const a_file = await cloudinary.subir(req.files.a_file.tempFilePath); // show the secure url, eg: // https://res.cloudinary.com/xx/image/upload/yy/winter.jpg console.log(a_file); // ... more code } export default upload;Ahora, en su aplicación principal, por ejemplo, "app.js", agregue este código para usar el middleware express para cargar archivos:
import express from 'express'; import fileUpload from 'express-fileupload'; const app = express(); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(fileUpload({useTempFiles: true})); // ... more code Pruebe la función usando cartero y el archivo se ha subido
NOTA : No olvides y recuerda que esto solo es una alternativa, existen otras muchas formas espero que lo entiendas y que te funcione