利用node的express配合multer中间件，实现简单的文件上传

能跑就行，。

已于 2022-07-05 10:04:10 修改

阅读量253

点赞数 1

分类专栏：写杂文章标签： javascript 前端 node.js

于 2022-07-04 15:49:00 首次发布

本文链接：https://blog.csdn.net/whtis666/article/details/125601775

版权

写杂专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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