Eine kurze Analyse, wie das http-Modul in Node Datei-Uploads verarbeitet

Wie verwende ich das http-Modul von Node.js, um Datei-Uploads zu verarbeiten? Der folgende Artikel befasst sich mit der Verarbeitung von Dateien, die vom Frontend auf der Serverseite hochgeladen werden. Ich hoffe, er ist für alle hilfreich!

Anfragedaten anzeigen

Wenn die Daten, die wir jetzt an den Server senden, wie in der Abbildung unten dargestellt sind, enthalten sie normale Feldinformationen name und eine Bilddatei file code>：<code>name 以及一个图片文件 file：

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

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 的模式来运行代码：

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

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

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

处理文件（图片）数据

获取图片数据

因为可读流的 '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，得到的数据如下：

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

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），在每个表单项的开头和结尾都有，并且在开头处的前面都会加上两个减号 --，在整个表单数据结束处的末尾也会加上两个减号。查看请求头：

可以发现在 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

Schauen wir uns zunächst an, wie man die Datei-Upload-Daten auf dem Server empfängt und auf der Debugging-Konsole ausdruckt:

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

Wenn wir die gedruckten Ergebnisse verstehen wollen, übergeben wir req.setEncoding(' binär') Stellen Sie die Zeichenkodierung auf 'binär' ein, sodass die erhaltenen Daten kein Pufferobjekt, sondern eine ASCII-codierte Zeichenfolge sind. Wir können einige Zeichenfolgenmethoden verwenden, um die Daten zu verarbeiten . .

Aber wenn die Dateigröße relativ groß ist, können die erhaltenen Daten nicht vollständig auf der Konsole angezeigt werden, indem Sie direkt „node“ oder „nodemon“ in die Befehlszeile eingeben, um den Code auszuführen. Wir können also einen Haltepunkt setzen, an dem wir die Anforderungsdaten drucken möchten, und den Code im Debugger-Modus ausführen: 🎜🎜🎜🎜Nach dem Klicken auf „Ausführen und Debuggen“ hilft uns der vs-Code beim Ausführen des Servers: 🎜🎜🎜🎜Danach, wenn wir die Upload-Anfrage senden, klicken Sie auf „ „Einzelschritt überspringen“ in der oberen rechten Ecke des Bildes unten, um die angeforderten Daten anzuzeigen – Informationen, die durch ASCII kompiliert werden können, wie z. B. englische Buchstaben, können direkt gesehen werden, während die Daten im Bild ein Haufen verstümmelter Zeichen sind: 🎜🎜🎜🎜Verbinden Der nächste Schritt besteht darin, die erhaltenen Anforderungsdaten zu verarbeiten, die darin enthaltenen Bilddaten abzufangen und dann das Bild durch Schreiben in den Stream zu generieren. 🎜🎜🎜Dateidaten (Bilddaten) werden verarbeitet🎜🎜🎜🎜Bilddaten abrufen🎜🎜🎜Weil Das Ereignis 'data' des lesbaren Streams kann bis zu 64 KB lesen Wenn das Bild relativ groß ist, können Zeitdaten mehrmals ausgelöst werden. Daher definieren wir die Variable reqData, um die von der Anfrage gesendeten Daten zu speichern: 🎜rrreee🎜Wenn req löst 'end' aus Ereignisbeschreibung Die angeforderten Daten wurden gelesen, wenn Sie in Zeile 6 des obigen Codes console.log(reqData) einen Haltepunkt setzen und dann anzeigen reqData , die erhaltenen Daten lauten wie folgt: 🎜🎜🎜🎜Die Daten des Bildes sollten image/pngrnrn und rn sein------------- -------- -------158329774739626517859573--rn Der mittlere Absatz. Wir können den Index der Start- (imgDataStartIndex) und Endpositionen (imgDataEndIndex) der Bilddaten abrufen und dann substring() verwenden, um Fangen Sie es ab und entfernen Sie schließlich mit der Methode trim() das führende Leerzeichen rn: 🎜rrreee

🎜Get the Trennzeichen Grenze🎜

🎜----------------------------------------158329774739626517859573 wird vom Client zufällig generiert und verwendet um jeden Absatz im Formular zu teilen. Das Datentrennzeichen (Grenze) befindet sich am Anfang und am Ende jedes Formularelements, und zwei Minuszeichen -- werden vor dem Anfang und am Ende hinzugefügt der gesamten Formulardaten. Am Ende stehen außerdem zwei Minuszeichen. Sehen Sie sich den Anforderungsheader an: 🎜🎜🎜🎜Sie können feststellen, dass boundary in content-type definiert ist, sodass wir die folgende Methode verwenden können, um das Trennzeichen zu erhalten: 🎜rrreee🎜🎜Bild generieren🎜🎜🎜Nachdem Sie die Bilddaten imgData erhalten haben, können Sie fss writeFile() schreibt die Datei, um das Bild zu generieren: 🎜rrreee 🎜Beachten Sie, dass es im dritten Parameter in 'binary' übergeben werden muss, um encoding festzulegen. 🎜🎜🎜Zusammenfassung🎜🎜🎜Jetzt wird der Code wie folgt zusammengefasst:🎜

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 教程！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie das http-Modul in Node Datei-Uploads verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!