利用node的express配合multer中间件,实现简单的文件上传
服务端代码
// app.js
// 使用 express框架 来写服务器
const utf8 = require('utf8')
const path = require('path')
const express = require('express')
const app = express()
// 引入数据库操作模块
const db = require('./db/index')
// 文件上传模块
const multer = require('multer')
// 配置文件名称以及文件存储路径
const storage = multer.diskStorage({
// 配置文件存储路径
destination: (req, file, cb) => {
// 文件上传到当前文件夹的 uploads目录下
cb(null, __dirname + '/uploads')
},
// 配置文件名
filename: (req, file, cb) => {
cb(null, utf8.decode(file.originalname)) // utf8.decode(str) 解决中文的文件名乱码问题
}
})
const upload = multer({ storage: storage })
// 跨域处理
const cors = require('cors')
app.use(cors())
// 上传文件路由
app.post('/file', upload.array('image', 2), (req, res) => {
console.log(req.files);
// 将文件名以及文件路径插入数据库中
for (let i = 0; i < req.files.length; i++) {
const sql = 'insert into file_upload set ?'
db.query(sql, { file_src: './uploads/' + req.files[i].filename, file_name: req.files[i].filename }, (err, result) => {
if (err) return res.send(err);
})
}
// 返回数据库中文件信息
const sql = 'select * from file_upload'
db.query(sql, (err, result) => {
res.send({ data: result })
})
})
// 启动服务
app.listen(3308, () => {
console.log('server running at http://127.0.0.1:3308');
})
// 数据库连接
const mysql = require('mysql')
const db = mysql.createPool({
host: '127.0.0.1',
user: 'root',
password: '***********', // 数据库密码
database: 'node_project' // 数据库名称
})
module.exports = db
前端代码
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件传输</title>
</head>
<body>
<!-- enctype="multipart/form-data" -->
<!-- 将enctype类型修改为 multipart/form-data,用于文件的上传-->
<form action="http://127.0.0.1:3308/file" method="post" enctype="multipart/form-data">
一码:<input type="file" name="image">
二码:<input type="file" name="image">
<button type="submit">提交</button>
</form>
</body>
</html>
完整的源代码链接:node文件上传源代码-Node.js文档类资源-CSDN文库(放心下载 无需积分)