web-dev-qa-db-ja.com

画像をアップロードしてから、MulterとExpress.jsで更新します

これで、 Multer および Express.js from here で画像をアップロードする段階が完了しました。その画像を含む記事を編集すると、正しい画像が得られます。しかし、私がやりたいのは、画像が同じである場合は何もしないでください。それ以外の場合は、新しくアップロードされた画像を取得します。

私の問題は、input[type="file"]がattrvalueを手動で設定することを受け入れないことです。私もこれを読んだ 質問 しかし、それが私の質問に関連しているかどうかはわかりません！

編集を送信すると、Cannot read property 'filename' of undefinedが表示されます。それでも、リクエストから他のすべてのフォームフィールドを正しく取得します。

PUTとDELETEに Mongoose と methodOverride を使用しています 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
});

For POST request

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');
  }); });
node.jsexpressfile-uploadmongoosemulter
8
Tes3awy

multer.single(fieldname) のドキュメントから

Fieldnameという名前の単一のファイルを受け入れます。単一のファイルはreq.fileに保存されます。


upload.single('image')を実行しているため、multerはnameimageを含むファイルを受け入れて保存しますreq.file.imageへ。ただし、ファイル名で参照しています。したがって、req.file.filenameをreq.file.imageに置き換える必要があります。

また、新しいファイルをアップロードまたは編集するときは、fileで処理する前に、multerが存在するかどうかを確認して、プロパティのundefinedエラーを回避する必要があります。 。

if (req.file) {
  // your code
}
3
onyx

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');
        });
});
0
Ahmed Agiza