Node.js之上传头像

前端：vue+element

<el-form-item label="头像">
    <el-upload
        class="avatar-uploader"
        name="head_img"
        action="http://127.0.0.1:3000/api/users/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
    >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div class="tips">请上传2MB以内的JPG图片,建议1:1比例</div>
</el-form-item>

handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
    this.imageUrl = res.data;
},

后端express

• 安装multer中间件

npm install --save multer

• 配置util/index.js

const multer = require('multer')
const fs = require('fs')
const path = require('path')

let upload = multer({
    storage: multer.diskStorage({
        // 设置文件存储位置
        destination: function (req, file, cb) {
            let date = new Date()
            let year = date.getFullYear()
            let month = (date.getMonth() + 1).toString().padStart(2, '0')
            let day = date.getDate()
            let dir = path.join(__dirname, '../public/uploads/' + year + month + day)

            // 判断目录是否存在，没有则创建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, { recursive: true })
            }

            // dir就是上传文件存放的目录
            cb(null, dir)
        },
        // 设置文件名称
        filename: function (req, file, cb) {
            let fileName = Date.now() + path.extname(file.originalname)
            // fileName就是上传文件的文件名
            cb(null, fileName)
        }
    })
})

module.exports =upload

• users.js

const { upload } = require('../utils/index')

/* 获取用户信息 */
router.post('/upload', upload.single('head_img'), async (req, res, next) => {
  let path = req.file.path.split('public')[1]
  let imgUrl = 'http://127.0.0.1:3000' + path
  res.send({ code: 0, msg: '上传成功', data: imgUrl })
})