使用 nodejs 和 multer 将图像上传到 MySQL
Upload Image to MySQL with nodejs and multer
大家好:我正在研究这个节点,express,mysql 需要上传图像并将其名称存储在MySQL 中的程序。图片上传得很好,但我无法插入 MySQL。有时我没有得到错误,但文件名没有插入到数据库中。其他时候,我收到文件名未定义的错误。
这是我的 index.html:
<body>
This is the webpage
<p></p>
<!-- make sure to put enctype="multipart/form-data" -->
<form id="upload" enctype="multipart/form-data" action="/upload" method="POST" class="upload-form">
<label>Select file</label><br />
<input type="file" name="upload" />
<br />
<p></p>
<button type="submit">Submit</button>
</form>
</body>
这是我的 server.js:
//setting up an express server.
//load express
const express = require('express');
//load multer
const multer = require('multer');
const app = express();
const path = require('path');
// const fs = require('fs');
//mysql stuff
mysql = require('mysql')
bodyParser = require("body-parser");
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'pass123!',
database : 'images_db'
});
connection.connect();
global.db = connection;
//endf of mysql stuff
const PORT = process.env.PORT || 3001;
app.use(express.static(path.join(__dirname, "public")));
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
// cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
},
});
const limits = {
fileSize : 4000000
}
//fileFilter function controls which files should be uploaded. req = request being made. file = contains file info. cb = callback function to tell multer when we are done filtering the file. send back an error message to the client with cb.
const fileFilter =(req, file, cb) => {
//if the file is not a jpg, jpeg, or png file, do not upload it multer; reject it.
if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
return cb(new Error('File must be of type JPG, JPEG, or PNG and nore more than 2MB in size'))
}
//undefined = nothing went wrong; true = that is true, nothing went wrong, accept the upload.
cb(undefined, true)
}
//set up the multer middleware
const upload = multer({
storage: storage,
limits: limits,
fileFilter: fileFilter
// filename: filename
})
// ROUTES
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
//app.use('/image', express.static('./upload')); // shared uploaded folder with users so users can access the profile images though image folder path
//upload image post route: localhost:port/upload
app.post("/upload",upload.single('upload'), (req, res) => {
// res.send();
//mysql stuff
// var sql = "INSERT INTO `file`(`name`, `type`, `size`) VALUES ('" + req.file.filename + "', '"+req.file.mimetype+"', '"+req.file.size+"')";
var sql = "INSERT INTO `file`(`name`) VALUES ('" + req.file.filename + "')";
var query = db.query(sql, function(err, result) {
console.log('inserted data');
});
message = "Successfully! uploaded";
//res.render('index',{message: message, status:'success'});
//end of mysql stuff
res.redirect('./');
}), (error, req, res, next) => {
res.status(400).res.send("You have successfully uploaded the file!");
// res.redirect('/');
}
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
})
我通过替换这段代码得到了解决方案:
var sql = "INSERT INTO `file`(`name`) VALUES ('" + req.file.filename + "')";
var query = db.query(sql, function(err, result) {
console.log('inserted data');
});
使用此代码(参数化查询):
let sql = "INSERT INTO image (name) VALUES (?)";
db.query(sql, [req.file.filename], function(err, result) {
console.log('inserted 88 data');
// console.log("query ", sql2);
});
现在,我既可以将图像上传到服务器,又可以将该图像的名称插入 MySQL 数据库。我希望这对任何人都有帮助。
大家好:我正在研究这个节点,express,mysql 需要上传图像并将其名称存储在MySQL 中的程序。图片上传得很好,但我无法插入 MySQL。有时我没有得到错误,但文件名没有插入到数据库中。其他时候,我收到文件名未定义的错误。
这是我的 index.html:
<body>
This is the webpage
<p></p>
<!-- make sure to put enctype="multipart/form-data" -->
<form id="upload" enctype="multipart/form-data" action="/upload" method="POST" class="upload-form">
<label>Select file</label><br />
<input type="file" name="upload" />
<br />
<p></p>
<button type="submit">Submit</button>
</form>
</body>
这是我的 server.js:
//setting up an express server.
//load express
const express = require('express');
//load multer
const multer = require('multer');
const app = express();
const path = require('path');
// const fs = require('fs');
//mysql stuff
mysql = require('mysql')
bodyParser = require("body-parser");
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'pass123!',
database : 'images_db'
});
connection.connect();
global.db = connection;
//endf of mysql stuff
const PORT = process.env.PORT || 3001;
app.use(express.static(path.join(__dirname, "public")));
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
// cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
},
});
const limits = {
fileSize : 4000000
}
//fileFilter function controls which files should be uploaded. req = request being made. file = contains file info. cb = callback function to tell multer when we are done filtering the file. send back an error message to the client with cb.
const fileFilter =(req, file, cb) => {
//if the file is not a jpg, jpeg, or png file, do not upload it multer; reject it.
if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
return cb(new Error('File must be of type JPG, JPEG, or PNG and nore more than 2MB in size'))
}
//undefined = nothing went wrong; true = that is true, nothing went wrong, accept the upload.
cb(undefined, true)
}
//set up the multer middleware
const upload = multer({
storage: storage,
limits: limits,
fileFilter: fileFilter
// filename: filename
})
// ROUTES
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
//app.use('/image', express.static('./upload')); // shared uploaded folder with users so users can access the profile images though image folder path
//upload image post route: localhost:port/upload
app.post("/upload",upload.single('upload'), (req, res) => {
// res.send();
//mysql stuff
// var sql = "INSERT INTO `file`(`name`, `type`, `size`) VALUES ('" + req.file.filename + "', '"+req.file.mimetype+"', '"+req.file.size+"')";
var sql = "INSERT INTO `file`(`name`) VALUES ('" + req.file.filename + "')";
var query = db.query(sql, function(err, result) {
console.log('inserted data');
});
message = "Successfully! uploaded";
//res.render('index',{message: message, status:'success'});
//end of mysql stuff
res.redirect('./');
}), (error, req, res, next) => {
res.status(400).res.send("You have successfully uploaded the file!");
// res.redirect('/');
}
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
})
我通过替换这段代码得到了解决方案:
var sql = "INSERT INTO `file`(`name`) VALUES ('" + req.file.filename + "')";
var query = db.query(sql, function(err, result) {
console.log('inserted data');
});
使用此代码(参数化查询):
let sql = "INSERT INTO image (name) VALUES (?)";
db.query(sql, [req.file.filename], function(err, result) {
console.log('inserted 88 data');
// console.log("query ", sql2);
});
现在,我既可以将图像上传到服务器,又可以将该图像的名称插入 MySQL 数据库。我希望这对任何人都有帮助。