multerでファイルをアップロードするとexpress.jsアプリケーションで動作しない

Question

私は、バックエンドにはExpress.js、フロントエンドにはReact.jsというシンプルなブログアプリを持っています。 postgresデータベースに画像を追加する機能を追加しようとしています。スキーマはこのようになります。

CREATE TABLE IF NOT EXISTS learningtable (
    id BIGSERIAL PRIMARY KEY, 
    topstuff VARCHAR(255), 
    bottomstuff VARCHAR(255), 
    pic1 bytea 
    ); 

アップロードフォームは次のようになります。

<form onSubmit={this.handleSubmit} > 
     <input type="text" name="topstuff" placeholder="top" onChange={this.handleTopChange} value={this.state.inputTopValue} /> <br/> 
     <input type="text" name="bottomstuff" placeholder="bottomt" onChange={this.handleBottomChange} value={this.state.inputBottomValue} /><br/> 
     <input type="file" name="pic1" /><br/> 
     <input type="submit" value="yeah boy" /> 
    </form> 

私のルータのファイルは、この

const express = require('express'); 
    const myrouter = express.Router(); 
    const controller = require('../controllers/learningController'); 
    const multer = require('multer'); 

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

    var upload = multer({ storage: storage }) 

    myrouter.post('/', upload.single('pic1'), controller.create); 

    module.exports = myrouter; 

のように見える私のコントローラは

 const controller = {};    

    controller.create = (req, res) => { 
    console.log(req.body); 
    console.log(req.file) 
     LearningObject.create({ 
     topstuff: req.body.topstuff, 
     bottomstuff: req.body.bottomstuff, 
     pic1: req.file, 
     }) 
     .then(jsonAfterAdding => { 
     res.json({ 
      message: 'okay', 
      jsonAfterAdding: jsonAfterAdding 
     }); 
     }).catch(err => { 
      console.log(err); 
      res.status(400).json(err); 
       }); 
      }; 

    module.exports = controller; 

と私はreq.fileをログ慰めるときに私のモデルは、この

const db = require('../db/config'); 
    const LearningObject = {}; 

    LearningObject.create = (blahblah) => { 
     return db.one (
     `INSERT INTO learningtable 
     (topstuff, bottomstuff, pic1) 
     VALUES ($1, $2, $3) RETURNING * 
     `, 
     [blahblah.topstuff, blahblah.bottomstuff, blahblah.pic1] 
    ); 
    }; 


    module.exports = LearningObject; 

のように見えますそれをアップロードしようとした後、それは未定義と言う。テキスト、「topstuff」と「bottomstuff」データベースに保存されますが、私は、フォルダまたはデータベース内の画像が表示されません。

Answer 1

は、htmlファイル

<form onSubmit={this.handleSubmit} action='/' method="POST" enctype="multipart/form-data" > 
     <input type="text" name="topstuff" placeholder="top" onChange={this.handleTopChange} value={this.state.inputTopValue} /> <br/> 
     <input type="text" name="bottomstuff" placeholder="bottomt" onChange={this.handleBottomChange} value={this.state.inputBottomValue} /><br/> 
     <input type="file" name="pic1" /><br/> 
     <input type="submit" value="yeah boy" /> 
    </form>