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

利用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>
  
  
  <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文库(放心下载 无需积分)

你可能感兴趣的:(写杂,javascript,前端,node.js)