通过multer上传图像时,出现图像未定义错误

时间:2018-10-26 09:04:19

标签: mysql node.js angular multer

我正在 node和Angular 5的mysql中使用它

        const express = require('express');
        const mysql = require('mysql');
        const bodyParser = require('body-parser');
        const path = require('path');
        const cors = require('cors');
        const router = express.Router();
        const multer = require('multer');
        const storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './assets/images/')
        },
        filename: function (req, file, cb) {
            cb(null, file.originalname)
        }
        });
        const fileFilter = (req, file, cb)=>{
        if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/png'){
            cb(null, true);
        }
        else{
            cb(null, false);
        }
        };
        upload = multer({
        storage: storage,
        limits:{
            filesize : 1024 * 1024 * 5
        },
        fileFilter : fileFilter
        });

        const app = express();

        //DATABASE CONNECTION
        const connection = mysql.createConnection({
        host: 'localhost',
        user:'root',
        password: 'root',
        database: 'inpblog',
        port: 8889
        });

        // ALLOW CROSS ORIGIN
        const corsOptions = {
        origin: 'http://localhost:4200',
        origin1: 'http://localhost:4202',
        optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
        };
        app.use(cors(corsOptions));
        app.use('./assets/images', express.static(path.join(__dirname, 'dist', 'upload')));

        const jsonParser = bodyParser.json();
        const urlencodedParser = bodyParser.urlencoded({ extended: false });


        connection.connect(function(error){
        if(!!error){
            console.log("error - db not connected");
        }
        else{
            console.log("connected");
        }
        });

在这里,我定义了在mysql数据库中上传图像的代码。通过邮递员将其上载到具有multer中间件的目标文件夹中的图像,但是当我通过ng形式上载图像时,它在控制台中显示错误。“图像未定义”并在mysql中提交“ c:/fakepath/image.jgg”。

这是用于插入帖子的API

        app.post('/insertPost', upload.single('txt_blog_image'), jsonParser, (req, res) => {
        console.log("image: ", req.file); // working fine only with postman
        //console.log("rBody: ", req.body.txt_blog_image); // working fine only with Angular
        let blogFields = {
            post_author : req.body.txt_blog_author,
            post_image : req.body.txt_blog_image
        };
        let sql = 'INSERT INTO insdb SET ?';
        let query = connection.query(sql, blogFields, (err,result)=> {
            res.send('New Post  added...');
        });
        });

        // Get All Post
        app.get('/getallposts', (req, res) => {
        let sql = 'SELECT * FROM insdb';
        let query = connection.query(sql, (err, results) => {
            if(err) throw err;
            console.log(results);
            res.send(results);
        });
        });

        app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'dist/index.html'));
        });

        app.listen(4202);

1 个答案:

答案 0 :(得分:0)

尝试这种方式。

var path = require('path');
var multer = require('multer');

var storage = multer.diskStorage({
   destination: function(req, file, callback) {
    callback(null, './assets/images/')
   },
   filename: function(req, file, callback) {
    console.log(file)
    callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
   }
})

在您的api中:

app.post('/getallposts',upload.single("image") , function(req, res) {
   let sql = 'SELECT * FROM insdb';
    let query = connection.query(sql, (err, results) => {
        if(err) throw err;
        console.log(results);
        res.send(results);
    });
})

角度一侧:

let form = new FormData();
form.append('image' , file); 

然后在服务器端使用consolereq.files检查文件是否到来?

有关更多信息和示例,请参见此link