Hochladen von Dateien mit Multer funktioniert nicht für express.js App

Question

Ich habe eine einfache Blog-App mit Express.js im Back-End und React.js im Front-End. Ich versuche ein Feature hinzuzufügen, um Bilder zur Postgres-Datenbank hinzuzufügen und mein Schema sieht so aus.

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

Meine Upload-Formular sieht wie folgt aus.

<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> 

Mein Router Datei sieht wie folgt aus

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; 

Mein Controller

 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; 

ist Und mein Modell sieht wie folgt aus

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; 

Wenn ich req.file einloggen Konsole nach dem Versuch, es hochzuladen, sagt es undefined . Die Texte "topstuff" und "bottomstuff" werden in der Datenbank gespeichert, aber ich sehe das Bild nicht im Ordner oder in der Datenbank.

Answer 1

versuchen, dies in HTML-Datei zu ändern

<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>