node上传文件 + vue3 + elementPlus 组件封装

一、node

1.在node环境中安装multer(node.js中间件)包，用于处理 multipart/form-data 类型的表单数据

 npm install --save multer

2.userRouter

var express = require('express');
const multer  = require('multer')
const upload = multer({ dest: 'public/avataruploads/' })

const UserController =  require('../../controllers/admin/UserController');

var router = express.Router();

// 上传图片接口                   
router.post('/adminapi/upload', upload.single('file'), UserController.upload);

module.exports = router;

public/avataruploads/  ：上传后存放的路径地址

upload.single('file') ：中的file是前端传过来的file文件的键

3.UserController.upload

const UserController = {
    // 上传图片
    upload: async (req, res, next) => { 
        console.log(req.file, 'req.file');
        res.send({code:200,msg:'上传成功',data:{url:'/avataruploads/' + req.file.filename}})
    }
}

module.exports = UserController;

二、Vue

1.upload组件
 

利用watch监听了数据的变化 拿到地址并不是带域名的（防止部署服务器时，图片丢失问题）所以更改后把配置后的域名给带上

2. 使用upload组件