vue+vant+nodejs上傳圖片

node+express+vue+vant項(xiàng)目中需要上傳頭像

前端創(chuàng)建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來處理數(shù)據(jù)

一個(gè)最簡單的上傳：

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 })
})

運(yùn)行起來矩父，點(diǎn)擊提交怕篷，發(fā)現(xiàn)upload目錄下多了一個(gè)沒有后綴名的文件件缸，手動加了后綴名，就是已經(jīng)上傳的圖片

獲取上傳的圖片的信息

除了將圖片保存在服務(wù)器外端考，還需要做很多其他事情，比如將圖片的信息存到數(shù)據(jù)庫里南用。

常用的信息比如原始文件名熙卡、文件類型、文件大小斤儿、本地保存路徑等剧包。借助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 })
})

運(yùn)行一遍，上傳圖片陕贮，就能看到控制臺打印的圖片信息了

文件類型：image/jpeg
原始文件名：1493077945847.jpg
文件大卸橛汀：87710
文件保存路徑：upload\870602e8de65a275736a65c351405e98

自定義文件上傳路徑、名稱

現(xiàn)在我們想要自己定制文件上傳的路徑肮之、名稱掉缺，multer也可以方便的實(shí)現(xiàn)。

自定義本地保存的路徑

修改下 dest 配置項(xiàng)就可以自定義本地保存的路徑

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

自定義本地保存的文件名

multer 提供了 storage 這個(gè)參數(shù)來對資源保存的路徑局骤、文件名進(jìn)行定制
兩個(gè)參數(shù)說明：

destination：設(shè)置資源的保存路徑攀圈。如果沒有這個(gè)配置項(xiàng)，默認(rèn)會保存在
/tmp/uploads 下峦甩。
filename：設(shè)置資源保存在本地的文件名赘来。

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) {
        // 將保存文件名設(shè)置為 字段名 + 時(shí)間戳 + 后綴名
        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 })
})