我的编程空间,编程开发者的网络收藏夹
学习永远不晚

浅析Node中http模块怎么处理文件上传

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

浅析Node中http模块怎么处理文件上传

怎么使用Node.js的http模块处理文件上传?下面本篇文章就来看看在服务器端要如何处理前端上传的文件,希望对大家有所帮助!

浅析Node中http模块怎么处理文件上传

查看请求数据

如果我们现在向服务器发送的数据如下图所示,里面包含了普通的字段信息 name 以及一个图片文件 file

1.png

我们先来看看如何在服务器接收到文件上传的数据,并在调试控制台打印查看:

const http = require('http')
const server = http.createServer((req, res) => {
  req.setEncoding('binary')
  req.on('data', data => {
    console.log(data)
  })
  req.on('end', () => {
    console.log('上传结束')
    res.end('上传成功')
  })
})
server.listen(3010, () => console.log('服务器开启'))

想要能看懂打印的结果,我们通过 req.setEncoding('binary') 设置了字符编码为 'binary',这样得到的数据就不是 buffer 对象而是 ASCII 编码后的字符串,我们就可以使用一些字符串的方法来处理数据了。

但是当文件大小比较大时,直接通过在命令行输入 node 或 nodemon 来运行代码,得到的数据无法完全在控制台展示。所以我们可以在要打印请求数据的地方打上断点,通过 debugger 的模式来运行代码:

2.png

点击 "运行和调试" 后,vs code 就会帮我们把服务器运行起来了:

3.png

之后当我们发送了上传的请求,再点击下图右上角的 "单步跳过",就可以看到请求的数据了 —— 那些可以被 ASCII 编译的信息,比如英文字母,可以直接看到了,而图片的数据则是一堆乱码:

4.png

接下来就是处理获取的请求数据,将里面的图片数据截取出来然后通过写入流生成图片。

处理文件(图片)数据

获取图片数据

因为可读流的 'data' 事件一次最多读取 64kb 的数据,当图片比较大时,可能会触发多次,所以我们定义变量 reqData 来存储请求发来的数据:

let reqData = ''
req.on('data', data => {
  reqData += data
})
req.on('end', () => {
  console.log(reqData) // 在这行打断点
  res.end('上传成功')
})

req 触发了 'end' 事件说明请求数据读取完毕,如果在上列代码的第 6 行 console.log(reqData) 处打个断点,然后查看 reqData,得到的数据如下:

5.png

图片的数据应该是 image/png\r\n\r\n\r\n----------------------------158329774739626517859573--\r\n 中间这段。我们可以去获取图片数据的起(imgDataStartIndex)止(imgDataEndIndex)位置的 index,然后使用 substring() 做个截取,最后再使用 trim() 方法去除首位的空格 \r\n

const imgType = 'image/png'
const imgDataStartIndex = reqData.indexOf(imgType) + imgType.length
const imgDataEndIndex = reqData.indexOf(`--${boundary}--`)
const imgData = reqData.substring(imgDataStartIndex, imgDataEndIndex).trim()

获取分隔符 boundary

--------------------------158329774739626517859573是客户端随机生成的,用于分割表单里的每段数据的分隔符(boundary),在每个表单项的开头和结尾都有,并且在开头处的前面都会加上两个减号 --,在整个表单数据结束处的末尾也会加上两个减号。查看请求头:

6.png

可以发现在 content-type 里定义了boundary,于是我们可以使用如下方法获取分隔符:

const boundary = req.headers['content-type'].split('boundary=')[1]

生成图片

获取到了图片数据 imgData 后,就可以通过 fs 的 writeFile() 写入文件生成图片了:

fs.writeFile('./img.png', imgData, 'binary', err => {
  if (!err) console.log('图片写入成功')
})

注意需要在第三个参数传入'binary' 来设定 encoding

总结

现将代码汇总如下:

const http = require('http')
const fs = require('fs')

const server = http.createServer((req, res) => {
  req.setEncoding('binary')
  const boundary = req.headers['content-type'].split('boundary=')[1]
  let reqData = ''
  req.on('data', data => {
    reqData += data
  })
  req.on('end', () => {
    const imgType = 'image/png'
    const imgDataStartIndex = reqData.indexOf(imgType) + imgType.length
    const imgDataEndIndex = reqData.indexOf(`--${boundary}--`)
    const imgData = reqData.substring(imgDataStartIndex, imgDataEndIndex).trim()
    fs.writeFile('./img.png', imgData, 'binary', err => {
      if (!err) console.log('图片写入成功')
    })
    res.end('上传成功')
  })
})

server.listen(3010, () => console.log('服务器开启'))

上述代码能够成功运行还有一些限制,比如只能处理单文件上传,且文件需要是 png 格式的图片,并且放在表单最后一项。文章的目的在于简单了解使用 node 的 http 模块搭建的服务器大体上是如何处理上传文件的请求的,为将来深入学习其它基于 http 模块的框架(express.js、koa.js 等)打好基础。

以上就是浅析Node中http模块怎么处理文件上传的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

浅析Node中http模块怎么处理文件上传

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

浅析Node中http模块怎么处理文件上传

怎么使用Node.js的http模块处理文件上传?下面本篇文章就来看看在服务器端要如何处理前端上传的文件,希望对大家有所帮助!
2023-05-14

Node中http模块如何处理文件上传

本文小编为大家详细介绍“Node中http模块如何处理文件上传”,内容详细,步骤清晰,细节处理妥当,希望这篇“Node中http模块如何处理文件上传”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。查看请求数据如果我
2023-07-05

node项目中怎么使用express来处理文件的上传

这篇文章主要介绍“node项目中怎么使用express来处理文件的上传”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“node项目中怎么使用express来处理文件的上传”文章能帮助大家解决问题。上传
2023-07-05

Postman中怎么处理文件上传和下载

在Postman中处理文件上传和下载,可以通过以下步骤进行操作:文件上传:在Postman中创建一个新的请求。在请求的Headers中添加Content-Type为multipart/form-data。在Body选项中选择form-d
Postman中怎么处理文件上传和下载
2024-03-13

Python中怎么利用内置模块处理ini配置文件

Python中怎么利用内置模块处理ini配置文件,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。注意:本文基于Python 3.9.0(CPython)。可以在
2023-06-15

编程热搜

目录