MySQL存储“未定义"nodejs multipart/form-data 中的字符串? [英] MySQL store "Undefined" string in nodejs multipart/form-data?

查看:49
本文介绍了MySQL存储“未定义"nodejs multipart/form-data 中的字符串?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的应用程序中使用 mysql 服务器的 js 应用程序我想在图像文件将存储到我的项目文件夹的同时存储图像的文件名.我正在使用这个

<div class="form-group"><输入类型=文本"类=表单控制"占位符=标题"id=标题"名称=标题"需要>

<div class="form-group"><输入类型=文本"类=表单控制"占位符=乐队名称"id="band_name"名称=乐队名称"需要>

<div class="custom-file"><输入类型=文件"类=自定义文件输入";id="自定义文件"名称=音频"需要><label class="custom-file-label";for=customFile">选择音频文件</label>

<div class="mt-3"><按钮类型=提交"class=btn btn-primary">提交</button><a onclick="cancel()";class=btn btn-default">取消</a>

</表单>

<块引用>

app.js

const path = require('path');const express = require('express');const multer = require('multer');const ejs = require('ejs');const bodyParser = require('body-parser');const mysql = require('mysql');const app = express();const DIR = './assets/uploads/featured-img';//设置数据库连接const connection=mysql.createConnection({主机:'本地主机',用户:'root',密码:'',数据库:'nodejs_crud'});connection.connect(功能(错误){if(!!error) console.log(error);else console.log('数据库已连接!')});让存储 = multer.diskStorage({目标:函数(请求,文件,回调){回调(空,目录);},文件名:函数(请求,文件,cb){cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));}});让上传 = multer({storage: storage});//设置视图文件app.use(express.static('assets'));//设置视图引擎app.set('视图引擎', 'ejs');app.use(bodyParser.json());app.use(bodyParser.urlencoded({extend: false}));app.get('/',(req, res) => {让 sql = SELECT * FROM 音乐"让查询 = connection.query(sql, (err, rows) => {如果(错误)抛出错误;res.render('music_index');});});app.post('/save',upload.single('featured_img'), function (req, res) {let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.body.featured_img + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";让查询 = connection.query(sql, (err, results) => {如果(错误)抛出错误;res.redirect('/');});});//服务器监听常量端口 = 3000;app.listen(port, () => console.log(`服务器在端口 ${port}` 上启动));

解决方案

以下是上传单个文件的示例.要以相同的形式上传多个文件,您需要使用 upload.array 而不是 upload.single:

/views/music_index.ejs:

<i class="material-icons">attach_file</i></label>

<div class="form-group"><输入类型=文本"类=表单控制"占位符=标题"id=标题"名称=标题"需要>

<div class="form-group"><输入类型=文本"类=表单控制"占位符=乐队名称"id="band_name"名称=乐队名称"需要>

<div class="mt-3"><按钮类型=提交"class=btn btn-primary">提交</button><a onclick="cancel()";class=btn btn-default">取消</a>

</表单>

app.js:

const path = require('path');const express = require('express');const multer = require('multer');const ejs = require('ejs');const bodyParser = require('body-parser');const mysql = require('mysql');const app = express();//确保该文件夹存在const DIR = './assets/uploads/featured-img';让存储 = multer.diskStorage({目标:函数(请求,文件,回调){回调(空,目录);},文件名:函数(请求,文件,cb){cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));}});让上传 = multer({storage: storage});app.use(express.static('assets'));app.set('视图引擎', 'ejs');app.use(bodyParser.json());app.use(bodyParser.urlencoded({extend: false}));app.get('/',(req, res) => {res.render('music_index');});app.post('/save',upload.single('featured_img'), function (req, res) {let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.file.path + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";控制台日志(sql);});常量端口 = 3000;app.listen(port, () => console.log(`服务器在端口 ${port}` 上启动));

js application with mysql server in my app I want to store the filename of the image at the same time the image file will store to my project folder. I am using this multer framework to upload my file yes I have successfully stored the image file in my project folder /uploads. But sadly MySQL wont allow me to send the data it will only store "undefined" string. How can we possibly fix this?

<form class="add-music-form" action="/save" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <div class="song-feaured-image">
            <input style="display: none;" type="file" accept="image/*" id="file" name="featured_img"  onchange="loadFile(event)" required>
            <img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
            <label for="file" class="attach_file" style="cursor: pointer">
            <i class="material-icons">attach_file</i></label>
        </div>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
    </div>

    <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile" name="audio" required>
        <label class="custom-file-label" for="customFile">Select audio file</label>
    </div>
    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Submit</button>
        <a onclick="cancel()" class="btn btn-default">Cancel</a>
    </div>
</form>

app.js

const path = require('path');
const express = require('express');
const multer = require('multer');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();

const DIR = './assets/uploads/featured-img';

// Set Database Connection
const connection=mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'',
    database:'nodejs_crud'
});

connection.connect(function(error){
    if(!!error) console.log(error);
    else console.log('Database Connected!')
});
 
let storage = multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, DIR);
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

let upload = multer({storage: storage});

//set view file
app.use(express.static('assets'));

//set view engine
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extend: false}));

app.get('/',(req, res) => {
    let sql = "SELECT * FROM music"
    let query = connection.query(sql, (err, rows) => {
        if(err) throw err;
        res.render('music_index');
    });
});

app.post('/save',upload.single('featured_img'), function (req, res) {
    let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.body.featured_img + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
    let query = connection.query(sql, (err, results) => {
        if(err) throw err;
        res.redirect('/');
    });
});

// Server Listening
const port = 3000;

app.listen(port, () => console.log(`Server started on port ${port}`));

解决方案

Here's an example of a single file being uploaded. To upload multiple files in the same form you'll need to use upload.array instead of upload.single:

/views/music_index.ejs:

<form class="add-music-form" action="/save" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <div class="song-feaured-image">
            <input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" required>
            <img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
            <label for="file" class="attach_file" style="cursor: pointer">
            <i class="material-icons">attach_file</i></label>
        </div>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
    </div>
    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Submit</button>
        <a onclick="cancel()" class="btn btn-default">Cancel</a>
    </div>
</form>

app.js:

const path = require('path');
const express = require('express');
const multer = require('multer');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
// Ensure this folder exists
const DIR = './assets/uploads/featured-img';
 
let storage = multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, DIR);
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

let upload = multer({storage: storage});
app.use(express.static('assets'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extend: false}));

app.get('/',(req, res) => {
    res.render('music_index');
});

app.post('/save',upload.single('featured_img'), function (req, res) {    
    let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.file.path + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
    console.log(sql);
});

const port = 3000;

app.listen(port, () => console.log(`Server started on port ${port}`));

这篇关于MySQL存储“未定义"nodejs multipart/form-data 中的字符串?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
数据库最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆