vue+vant+nodejs上传图片

node+express+vue+vant项目中需要上传头像 前端创建uploadImage.vue(先用了原生的Form来上传): 后端使用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

本文章由javascript技术分享原创和收集