A brief analysis of how the http module in Node handles file uploads

How to use the http module of Node.js to process file uploads? The following article will take a look at how to process files uploaded by the front end on the server side. I hope it will be helpful to everyone!

View request data

If the data we send to the server now is as shown in the figure below, it contains ordinary field information name and an image file file:

Let’s first see how to receive the file upload data on the server and Print and view in the debugging console:

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('服务器开启'))

To understand the printed results, we set the character encoding to 'binary' through req.setEncoding('binary') , the data obtained in this way is not a buffer object but an ASCII encoded string. We can use some string methods to process the data.

But when the file size is relatively large, the data obtained cannot be fully displayed on the console by directly entering node or nodemon on the command line to run the code. So we can put a breakpoint where we want to print the request data and run the code through the debugger mode:

After clicking "Run and Debug", vs code will help We have the server running:

After that, when we send the upload request, click "Single Step Skip" in the upper right corner of the picture below to see the request The data - the information that can be compiled by ASCII, such as English letters, can be seen directly, while the data of the picture is a bunch of garbled characters:

The next step is Process the obtained request data, intercept the image data inside and then generate the image by writing to the stream.

Processing file (picture) data

Getting picture data

Becausecan The 'data' event of the read stream can read up to 64kb of data at a time. When the image is relatively large, it may be triggered multiple times, so we define the variable reqData to store the request Data sent:

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

When req is triggered 'end' event description indicates that the request data has been read, if in line 6 of the above code## Make a breakpoint at #console.log(reqData), and then check reqData. The data obtained is as follows:

The data of the picture should be Is

image/png\r\n\r\n and \r\n------------------------ ----158329774739626517859573--\r\n The middle paragraph. We can get the index of the starting (imgDataStartIndex) and ending (imgDataEndIndex) positions of the image data, then use substring() to intercept it, and finally use trim() Method removes the leading space \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()

Get the separator boundary

--------------------------158329774739626517859573 is a delimiter randomly generated by the client and used to separate each piece of data in the form ( boundary), at the beginning and end of each form item, and two minus signs -- will be added in front of the beginning, and two minus signs will be added to the end of the entire form data. A minus sign. Check the request header:

You can find that

boundary is defined in content-type, so we can use the following method to get the separation Symbol:

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

Generate image

After obtaining the image data

imgData, you can use fswriteFile() writes the file to generate the image:

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

Note that you need to pass in

'binary' in the third parameter to set encoding.

Summary

The code is now summarized as follows:

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相关知识，请访问：nodejs 教程！

The above is the detailed content of A brief analysis of how the http module in Node handles file uploads. For more information, please follow other related articles on the PHP Chinese website!