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 官方文档: https://github.com/expressjs/multer
来源: http://www.jianshu.com/p/f1ba00366de1