使用multer、body-parser接收前端数据

混合表单的提交和后台的数据接受

1. 前端代码

    
    
    
        
        
    
    
        

            

                用户名
                
            
            

                密码
                
            
            

                头像
                
            
            

                
                    性别
                
                
                
            
            

                提交
            
        
        
        
    
    

2. 后台代码
   cnpm install multer body-parser --save-dev cnpm install express --save

    const express = require('express');
    
    const app = express();
    
    const bodyParser = require('body-parser');
    const multer = require('multer');
    
    
    //设置跨域访问
    app.all('*', function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        res.header("X-Powered-By", ' 3.2.1');
        res.header("Content-Type", "application/json;charset=utf-8");
        next();
    });
    
    app.use(bodyParser.urlencoded({ extended: false }));
    let multerObj = multer({ dest: './uploads/' })  // 设置文件上传目录
    app.use(multerObj.any());
    
    app.post('/files', function (req, res) {
        // req.files是一个数组，body表示普通数据，files表示文件数据
        // console.log(req.body, req.files)
    
        // 如果是图片，可以这样存储
        let avatarUrl = ''
        
        req.files.forEach(file => {
            if (file.fieldname === 'avatar') {   // avatar  就是前端存储头像的name字段
                avatarUrl = file.filename    // filename 就是对应要存到数据库的字段
            }
        })
        
        const { username, password, sex } = req.body;
    
        // user表
        // insert into user(username, password, avatar_url, sex) values ('${username}', '${password}', '${avatar_url}', '${sex}')
    
        res.send('ok')
    })
    
    // 静态文件映射
    app.use(express.static('uploads/'))
    
    app.listen(3001);