Nodejs Загрузка изображений - PullRequest
0 голосов
/ 21 апреля 2020

Эй, я создаю веб-сайт, который будет показывать статьи и соответствующие изображения одновременно. Я уже загружаю файлы изображений, но не могу показать их на своей странице. Это мои соответствующие коды:

Статья Модуль:

let mongoose = require('mongoose');

let articleSchema = mongoose.Schema({
  title:{
    type: String,
    required: true
  },
  author:{
    type:String,
    required:true
  },
  body:{
    type:String,
    required:true
  },
  img:{
    type:String,
    required:true
  }
});
let Article = module.exports = mongoose.model('Article', articleSchema);

Пользовательский модуль:

let mongoose = require('mongoose');

// User Schema
let UserSchema = mongoose.Schema({
  name:{
    type: String,
    required: true
  },
  email:{
    type: String,
    required: true
  },
  username:{
    type: String,
    required: true
  },
  password:{
    type: String,
    required: true
  }
});

let User = module.exports = mongoose.model('User', UserSchema);

Статья. js:

const express = require('express');
const router = express.Router();
const multer = require('multer');

// Article Model
let Article = require('../models/article');
// User Model
let User = require('../models/user');

router.get('/sonuc', function(req, res){
  if(req.query.search) {
    const regex = new RegExp(escapeRegex(req.query.search), 'gi');
    Article.find({"title": regex}, function(err, articles) {
        if(err) {
            console.log(err);
        } else {
           res.render("sonuc", { 
             articles: articles 
            });
        }
    });
  }
});

function escapeRegex(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};

// Add Route
router.get('/add', ensureAuthenticated, function(req, res){

  res.render('add_article', {
    title:'Add Article'
  });
});

const upload = multer({dest: __dirname + '/uploads'});

// Add Submit POST Route
router.post('/add',upload.single('img'),  function(req, res){

  req.checkBody('title','Title is required').notEmpty();
  //req.checkBody('author','Author is required').notEmpty();
  req.checkBody('body','Body is required').notEmpty();

  // Get Errors
  let errors = req.validationErrors();

  if(errors){
    res.render('add_article', {
      title:'Add Article',
      errors:errors
    });
  } else {
var article = new Article({
    title: req.body.title,
    author: req.user._id,
    img: '/uploads/' + req.file.filename,
    body: req.body.body,
   });

    article.save(function(err){
      if(err){
        console.log(err);
        return;
      } else {
        res.render('add_article', {
        });
      }
    });
  }
});

// Load Edit Form
router.get('/edit/:id', ensureAuthenticated, function(req, res){
  Article.findById(req.params.id, function(err, article){
    /*if(article.author != req.user._id){
      req.flash('danger', 'Not Authorized');
      return res.redirect('/');
    }*/
    res.render('edit_article', {
      title:'Edit Article',
      article:article
    });
  });
});

// Update Submit POST Route
router.post('/edit/:id', function(req, res){
  let article = {};
  article.title = req.body.title;
  article.author = req.body.author;
  article.body = req.body.body;

  let query = {_id:req.params.id}

  Article.update(query, article, function(err){
    if(err){
      console.log(err);
      return;
    } else {
      req.flash('success', 'Article Updated');
      res.redirect('/');
    }
  });
});

// Delete Article
router.delete('/:id', function(req, res){
  if(!req.user._id){
    res.status(500).send();
  }

  let query = {_id:req.params.id}

  Article.findById(req.params.id, function(err, article){
    if(article.author != req.user._id){
      res.status(500).send();
    } else {
      Article.remove(query, function(err){
        if(err){
          console.log(err);
        }
        res.send('Success');
      });
    }
  });
});

// Get Single Article
router.get('/:id', function(req, res){

  Article.findById(req.params.id, function(err, article){
    //User.findById(article.author, function(err, user){
      res.render('article', {
        article:article,
        imagePath: user.img,
        author: user.name
      });
    });
  });
//});

// Access Control
function ensureAuthenticated(req, res, next){
  if(req.isAuthenticated()){
    return next();
  } else {
    req.flash('danger', 'Please login');
    res.redirect('/users/login');
  }
}

module.exports = router;

article.pug:

extends layout

block content
  br
  h1= article.title
  //h5 Written by #{author}
  p= article.body
  img(src=imagePath, alt='img')




  hr
  if user
    if user.id ==article.author
      a.btn.btn-default(href='/articles/edit/'+article._id) Edit 
      a.btn.btn-danger.delete-article(href='#',data-id=article._id) Delete

Тем не менее я не могу понять, почему это эти коды не работают. Я жду вашей поддержки. Каждый ответ будет оценен.

Мое приложение. js:

const express = require('express');
const ejs = require('ejs');
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');
config = require('./config/database');
const multer = require('multer');

mongoose.connect(config.database);
let db = mongoose.connection;

// Check connection
db.once('open', function(){
  console.log('Connected to MongoDB');
});

// Check for DB errors
db.on('error', function(err){
  console.log(err);
});


// Init App
const app = express();

// Bring in Models
let Article = require('./models/article');

// EJS
app.set('view engine', 'ejs');

// Public Folder
app.use(express.static('./public'));

// Load View Engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Body Parser Middleware
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());

// Set Public Folder
app.use(express.static(path.join(__dirname, 'public')));

// Express Session Middleware
app.use(session({
  secret: 'keyboard cat',
  resave: true,
  saveUninitialized: true
}));

// Express Messages Middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')(req, res);
  next();
});

// Express Validator Middleware
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
      var namespace = param.split('.')
      , root    = namespace.shift()
      , formParam = root;

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']';
    }
    return {
      param : formParam,
      msg   : msg,
      value : value
    };
  }
}));

// Passport Config
require('./config/passport')(passport);
// Passport Middleware
app.use(passport.initialize());
app.use(passport.session());

app.get('*', function(req, res, next){
  res.locals.user = req.user || null;
  next();
});

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

const upload = multer({ storage: storage })

// Check File Type
function checkFileType(file, cb){
  // Allowed ext
  const filetypes = /jpeg|jpg|png|gif/;
  // Check ext
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  // Check mime
  const mimetype = filetypes.test(file.mimetype);

  if(mimetype && extname){
    return cb(null,true);
  } else {
    cb('Error: Images Only!');
  }
}

// Home Route
app.get('/', function(req, res){
  Article.find({}, function(err, articles){
    if(err){
      console.log(err);
    } else {
      res.render('index', {
        title:'Articles',
        articles: articles
      });
    }
  });
});

app.get('/sonuc', function(req, res){
  if (req.query.search) {
    const regex = new RegExp(escapeRegex(req.query.search), 'gi');
    Article.find({"title": regex}, function(err, articles) {
        if(err) {
            console.log(err);
        } else {
           res.render("index", { 
             articles: articles 
            });
        }
    });
  }
});

function escapeRegex(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};

// Route Files
let articles = require('./routes/articles');
let users = require('./routes/users');
app.use('/articles', articles);
app.use('/users', users);

// Start Server
app.listen(3000, function(){
  console.log('Server started on port 3000...');
});

1 Ответ

1 голос
/ 22 апреля 2020

Вы должны передать путь к тегу img, чтобы он отобразил ваше изображение.

Вы указали /upload в качестве папки, поэтому просто поместите ее в атрибут src img тегов.

extends layout

block content
  br
  h1= article.title
  //h5 Written by #{author}
  p= article.body
  img(src=imagePath, alt='img')

GET fix fix:


  Article.findById(req.params.id, function(err, article){

//You commented this line that's why user is undefined
    User.findById(article.author, function(err, user){ 
      res.render('article', {
        article:article,
        imagePath: article.img,  //Should be article.img
        author: user.name
      })

...