Node学习（九）022-管理系统之添加英雄——服务器编写添加的接口-使用multer模块来处理、multer基本用法& 处理新的静态资源之express.static() & dirname绝对路径

Node学习（九）022-管理系统之添加英雄——服务器编写添加的接口-使用multer模块来处理、multer基本用法& 处理新的静态资源之express.static() & __dirname绝对路径

4.4 服务器编写添加的接口

说明：

表单提交数据有两种类型（请求头中的Content-Type）：

• multipart/form-data
  • 使用FormData收集表单数据，会是这种编码格式；
  • 服务器端使用multer模块来处理
• application/x-www-form-urlencoded
  • 使用serialize() 收集表单数据，会是这种编码格式；形如： aa=xxx&bb=yyy
  • 服务器端使用body-parser模块处理

添加的接口的写法：

• 首先要加载multer，因为有图片上传

• 使用multer，必须先配置，至少要配置上传的目录；当然也可以配置上传后的文件的名字

  地址——Search · multer · GitHub
  https://github.com/search?q=multer&ref=openserch

  multer地址——GitHub - expressjs/multer: Node.js middleware for handling multipart/form-data.
  https://github.com/expressjs/multer

  multer地址-简体中文——https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

  安包：

  npm i multer

  界面

multer基本用法

• 然后在添加接口中，使用 upload.single(‘文件域的name值’)，来完成上传。

// 加载multer
const multer = require('multer');
const upload = multer({
    
     dest: 'uploads/' });
// 2. 完成添加接口
app.post('/addHero', upload.single('heroIcon'), (req, res) => {
    
    
    // 使用body-parser是不能接受到form-data类型的数据的。因为提交的数据的编码格式为 multipart/form-data
    // 需要使用新的模块，叫做 multer  打印结果见下图
    // upload.single('heroIcon')。里面的 heroIcon 是表单中文件域的 name值
    // console.log(req.file); // 包含图片信息
    // console.log(req.body); // 包含文本信息，比如英雄的名字、昵称、技能等

    // 后续，写SQL语句，完成添加即可
    let sql = 'insert into heroes set ?';
    let values = {
    
    
        // 字段: 值
        name: req.body.heroName,
        nickname: req.body.heroNickName,
        file: req.file.path,
        skill: req.body.skillName
    };
    db(sql, values, (err, result) => {
    
    
        if (err) {
    
    
            // res.send(可以填js对象);  // 在响应数据的时候，send方法会将对象转成json
            res.send({
    
    code: 201, message: '添加失败'});
        } else {
    
    
            res.send({
    
    code: 200, message: '添加成功'});
        }
    });
});

1、效果-参照打印信息

2、点击调用接口

3、开启服务，调用接口后，打印结果

4、写SQL语句，完成添加即可；见上方代码

5、操作验证接口

2.1、界面新增成功

2.2、数据库中也添加成功

2.3、文本数据和接口都成功，但界面没渲染出图片

app.js中，增加配置

app.use('/uploads', express.static(__dirname + '/uploads'));


const upload = multer({
    
    
    dest: 'uploads/'
});

2.4、增加uploads相关配置后，成功渲染图片

4.5 处理新的静态资源

参考文档——https://www.expressjs.com.cn/starter/static-files.html

当有上传文件之后，uploads文件夹中的图片也是静态资源文件了。所以需要在app.js中，配置uploads文件夹为静态资源目录，在app.js中，加入如下代码即可：

// app.use(express.static('uploads'));  // 如果数据库存的是文件夹，没有uploads，可以使用这个方案
app.use('/uploads', express.static(__dirname + '/uploads'));

执行 git add . 和 git commit -m '下载了multer,完成了添加英雄的接口,配置uploads文件夹为静态资源目录'