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：设置资源保存在本地的文件名。