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，必须先配置，至少要配置上传的目录；当然也可以配置上传后的文件的名字

  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文件夹为静态资源目录'

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/10836.html