node+express+vue+vant项目中需要上传头像

前端创建uploadImage.vue(先用了原生的Form来上传):

<template>
  <div>
    <Header name='上传头像'></Header>
    <van-uploader :after-read='onRead' v-model='fileList' multiple :max-count='1'       
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    onRead (file) {
      console.log(file)
      let formData = new FormData()
      formData.append('avatar', file.file)
      console.log(formData)
      this.$axios.post('/api/upload', formData, {
        headers: {
          'enctype': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

后端使用multer来处理数据

一个最简单的上传：

const express = require('express')
const multer  = require('multer')
const  app = express()
const upload = multer({ dest: 'upload/' })

// 单图上传
app.post('/upload', upload.single('avatar'), function (req, res, next) {
    res.send({ code: 200 })
})

运行起来，点击提交，发现upload目录下多了一个没有后缀名的文件，手动加了后缀名，就是已经上传的图片

获取上传的图片的信息

除了将图片保存在服务器外，还需要做很多其他事情，比如将图片的信息存到数据库里。

常用的信息比如原始文件名、文件类型、文件大小、本地保存路径等。借助multer可以很方便的获取这些信息。

multer会将文件的信息写到 req.file 上，如下代码所示：

app.post('/upload', upload.single('avatar'), function (req, res, next) {
    const file = req.file
    console.log('文件类型：%s', file.mimetype)
    console.log('原始文件名：%s', file.originalname)
    console.log('文件大小：%s', file.size)
    console.log('文件保存路径：%s', file.path)
    res.send({ code: 200 })
})

运行一遍，上传图片，就能看到控制台打印的图片信息了

文件类型：image/jpeg
原始文件名：1493077945847.jpg
文件大小：87710
文件保存路径：upload\870602e8de65a275736a65c351405e98

自定义文件上传路径、名称

现在我们想要自己定制文件上传的路径、名称，multer也可以方便的实现。

自定义本地保存的路径

修改下 dest 配置项就可以自定义本地保存的路径

const upload = multer({ dest: 'upload/' })

自定义本地保存的文件名

multer 提供了 storage 这个参数来对资源保存的路径、文件名进行定制 两个参数说明：

• destination：设置资源的保存路径。如果没有这个配置项，默认会保存在 /tmp/uploads 下。
• filename：设置资源保存在本地的文件名。

const createFolder = function(folder){
    try {
        fs.accessSync(folder)
    } catch(e) {
        fs.mkdirSync(folder)
    }
}
const uploadFolder = './upload/'
createFolder(uploadFolder)
// 通过 filename 属性定制
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder) // 保存的路径
    },
    filename: function (req, file, cb) {
        // 将保存文件名设置为 字段名 + 时间戳 + 后缀名
        let fileFormat = (file.originalname).split('.')
        cb(null, file.fieldname + '-' + Date.now()) + '.' + fileFormat[fileFormat.length - 1])
    }
})
const upload = multer({ storage: storage })
app.post('/upload', upload.single('avatar'), function (req, res, next) {
    const file = req.file
    res.send({ code: 200 })
})

相关链接

multer官方文档：github.com/expressjs/m…