头像上传

上传单张图片

完整流程

1. 安装依赖

npm install multer

2. 引入 multer

const multer = require('multer')

3. 引入 path 用以解析获取文件扩展名

const path = require('path')

4. 在静态资源目录 public 中，创建上传目录 upload；上传目录要 提前 创建好；如果不指定，上传的内容将保留在内存中
5. 配置存储 storage：指定上传目录为 upload

. Multer accepts an options object, the most basic of which is the dest property, which tells Multer where to upload the files. In case you omit the options object, the files will be kept in memory and never written to disk.

. In an average web app, only dest might be required.

. more control over your uploads, use the storage option instead of dest.

. 使用 diskStorage 配置可以更好控制上传细节，如改名；有了 diskStorage，可以放弃 dest 配置

. 使用时间戳为上传图片拼接名字；存储位置和命名方式，根据实际情况定制，如也可以按照学号+姓名命名头像文件

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    // 绝对路径，基于当前脚本文件所在目录的完整路径；更可靠，因为它不依赖于应用程序的当前工作目录
    callback(null, __dirname + '/public/upload')
    // 相对路径，相对于当前工作目录的路径
    // callback(null, "public/upload");
  },
  filename: (req, file, callback) => {
    let ext = path.extname(file.originalname)
    callback(null, file.fieldname + Date.now() + ext)
  }
})

6. 创建 multer 示例 - 可以看出，只需要指定一个存储即可

const upload = multer({
  storage: storage
})

7. 定制响应路由 - name 是网络请求中为图片指定的 name 属性，即：只接收请求中 name 属性指定的图片文件；可以根据不同的 name 上传不同用途的图片，如 name 为 img 代表普通图片，为 avatar 代表头像图片等等

. req.file 可以获取到具体的文件信息

app.post('/upload', upload.single('avatar'), (req, res) => {
  res.send({
    err: 0,
    url: 'http://127.0.0.1:3000/upload/' + req.file.filename
  })
})

. 默认情况下，只是简单的将文件上传到指定目录；不会解析文件信息，如文件名或文件后缀

{
  fieldname: 'avatar',
  originalname: 'XG7mQxuM7nYJ787bce43d31211e2a9fb482c28888418.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: 'upload',
  filename: '7d9d07bdadd775e054e0e0e00fe2d444',
  path: 'upload\\7d9d07bdadd775e054e0e0e00fe2d444',
  size: 91117
}

8. 完整服务端代码index.js如下

const express = require('express')
const multer = require('multer')
const path = require('path')

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, __dirname + '/public/upload')
  },
  filename: (req, file, callback) => {
    let ext = path.extname(file.originalname)
    callback(null, file.fieldname + Date.now() + ext)
  }
})

const upload = multer({
  storage: storage
})

const app = express()
const PORT = 3000
app.use(express.static('./public'));

app.post('/upload', upload.single('avatar'), (req, res) => {
  res.send({
    err: 0,
    url: 'http://127.0.0.1:3000/upload/' + req.file.filename
  })
})

app.listen(port, () => {
  console.log(`服务器启动成功，访问地址：http://127.0.0.1:${PORT}`);
})

上传单张图片和数据

submit
• client - HTML

<form action="http://127.0.0.1:3000/upload/avatar" enctype="multipart/form-data" method="post">
  <input type="file" name="avatar">
  <input type="text" placeholder="your sn" name="usn">
  <input type="text" placeholder="your name" name="uname">
  <button>submit</button>
</form>

• server

router.post('/mix', upload.single('uimg'), (req, res) => {
  res.send({ msg: 'ok' })
})

• 提示：把 upload 暴露出去
• 说明：引入时间格式依赖；增加了创建目录功能

const multer = require('multer')
const fs = require('fs');
const path = require('path')
const sd = require('silly-datetime');

// Set up storage for uploaded files
const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    let date = sd.format(new Date(), 'YYYYMMDD');
    let dir = path.join('public/upload', date)
    if (!fs.existsSync(dir)) {
      fs.mkdirSync(dir)
    }
    callback(null, dir);
  },
  filename: (req, file, callback) => {
    let ext = path.extname(file.originalname)
    callback(null, file.fieldname + Date.now() + ext);
  }
});

// Create the multer instance
const upload = multer({
  storage: storage
});

module.exports = upload