上传图片,然后使用Multer和Express.js更新

时间:2018-08-12 21:26:58

标签: node.js express file-upload mongoose multer

因此,我已经完成了使用Multer中的Express.jshere上传图像的阶段。现在,如果我编辑具有该图像的文章,则会得到正确的图像。但是,我想做的是,如果图像仍然相同,则什么也不要做,否则请使用新上传的图像。

我的问题是input[type="file"]不接受手动设置的attr value。我也读过此question,但不知道是否与我的问题有关!

提交修改后,我得到的是Cannot read property 'filename' of undefined。但是,我从请求中正确获取了所有其他表单字段。

我正在使用MongoosemethodOverride进行PUT和DELETE requests

Multer

const multer = require('multer');
const storage = multer.diskStorage({
  destination: (_req, _file, done) => {
    done(null, path.join(__dirname, './../../public/uploads/'));
  },
  filename: (_req, file, done) => {
    done(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`,
    );
  },
});
const upload = multer({
  storage
});

用于POST请求

router.post('/add', authenticate, upload.single('image'), (req, res) => {

    const userId = req.user.id;

    const body = req.body;

    const title = body.title;
    const content = body.content;
    const featured = body.featured;
    const image = req.file.filename;

    const newPost = new Post({
      title,
      content,
      image,
      userId,
      featured
    });

    newPost
      .save()
      .then(post => {
        if (!post) {
          return req.flash('error', 'Unable to add article!!!');
        }
        req.flash('success', 'Added article successfully');
      })
      .catch(err => {
        return req.flash('error', 'Unable to add article!!!');
      });

    res.redirect('/posts');
  },
);

用于PUT请求

router.put(/post/edit/:id', authenticate, upload.single('image'), (req, res) => {
    const id = req.params.id;

const body = req.body;

console.log('body:', body);
console.log('req:', req);

const title = body.title;
const content = body.content;
const featured = body.featured;
const image = req.file.filename;

Post.findOneAndUpdate(id,
  {
    $set: {
      title,
      content,
      featured,
      image
    }
  },
  { new: true }
).then(post => {
    req.flash('success', 'Edits submitted successfully');
    res.redirect('/posts');
  })
  .catch(err => {
    return req.flash('error', 'Unable to edit article');
  }); });

3 个答案:

答案 0 :(得分:2)

根据multer.single(fieldname)

的文档
  

接受名称为fieldname的单个文件。单个文件将存储在req.file中。


由于您正在执行class Clamped(_decimal.DecimalException): Attribute error: module 'decimal' has no attribute 'DecimalException',因此您的upload.single('image')将接受带有multer image 的文件并将其存储到name。但是,您使用 filename 引用它。因此,您应将req.file.image替换为req.file.filename

另外,在上载或编辑新文件时,您还需要检查req.file.image是否存在,然后再用file处理它,以避免 undefined属性错误。

multer

答案 1 :(得分:0)

您只需要使用if (req.file)检查是否有附加到请求的文件,并相应地修改数据库查询。 这样您的帖子编辑代码可以像这样:

router.put('/post/edit/:id', authenticate, upload.single('image'), (req, res) => {
    const id = req.params.id;

    const body = req.body;

    console.log('body:', body);
    console.log('req:', req);


    const title = body.title;
    const content = body.content;
    const featured = body.featured;

    const updates = {
        title,
        content,
        featured
    };

    if (req.file) {
        const image = req.file.filename;
        updates.image = image;
    }


    Post.findOneAndUpdate(id, {
            $set: updates
        }, {
            new: true
        }).then(post => {
            req.flash('success', 'Edits submitted successfully');
            res.redirect('/posts');
        })
        .catch(err => {
            return req.flash('error', 'Unable to edit article');
        });
});

答案 2 :(得分:-1)

const multer = require('multer');

 var storage = multer.diskStorage({
    destination: (req, file, callback) => {
    callback(null, 'public/uploads/')
 },
 filename: (req, file, callback) => {
    var filetype = file.mimetype;
    var fileformate = filetype.split("/")[1];
    callback(null, Date.now() + '.' + fileformate);
 }
});
var upload = multer({ storage: storage });