Node の http モジュールがファイルのアップロードを処理する方法の簡単な分析

Node.js の http モジュールを使用してファイルのアップロードを処理するにはどうすればよいですか?次の記事では、フロントエンドからアップロードされたファイルをサーバー側で処理する方法について説明しますので、皆様の参考になれば幸いです。

リクエストデータの表示

現在サーバーに送信するデータが次の図のとおりである場合、通常のデータが含まれています。フィールド情報 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' に設定します。 # この方法で取得されたデータはバッファ オブジェクトではなく、ASCII エンコードされた文字列であるため、いくつかの文字列メソッドを使用してデータを処理できます。

ただし、ファイル サイズが比較的大きい場合は、コマンド ラインに直接「node」または「nodemon」を入力してコードを実行しても、取得したデータをコンソールに完全に表示することができません。したがって、リクエスト データを出力する場所にブレークポイントを置き、デバッガー モードでコードを実行できます。

[実行してデバッグ] をクリックした後、vs code が役立ちます。サーバーが実行されています:

その後、アップロード リクエストを送信するときに、下の図の右上隅にある [シングル ステップ スキップ] をクリックしてリクエストを表示します。データは、英字などASCIIでまとめられる情報はそのまま見ることができますが、画像のデータは文字化けの塊です:

次のステップは、取得したリクエスト データを処理し、内部の画像データをインターセプトし、ストリームに書き込むことで画像を生成します。

ファイル(画像)データの処理

画像データの取得

なぜなら

できるからです。読み取りストリーム の 'data' イベントは、一度に最大 64 kb のデータを読み取ることができます。画像が比較的大きい場合、複数回トリガーされる可能性があるため、変数 ## を定義します#reqData リクエストを保存する データ送信: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">let reqData = &amp;#39;&amp;#39; req.on(&amp;#39;data&amp;#39;, data =&gt; { reqData += data }) req.on(&amp;#39;end&amp;#39;, () =&gt; { console.log(reqData) // 在这行打断点 res.end(&amp;#39;上传成功&amp;#39;) })</pre><div class="contentsignin">ログイン後にコピー</div></div>

req

がトリガーされたとき 'end' イベントの説明は、リクエスト データが読み取られたことを示します。上記のコードの 6 行目console.log(reqData) にブレークポイントを作成し、reqData を確認します。取得されるデータは次のとおりです:

#画像のデータは image/png\r\n\r\n

および

\r\n---------- である必要があります。 -------------- ----158329774739626517859573--\r\n 真ん中の段落。画像データの開始位置 (imgDataStartIndex) と終了位置 (imgDataEndIndex) のインデックスを取得し、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()

区切り文字の境界を取得します。

--------------------------158329774739626517859573

はクライアントによってランダムに生成された区切り文字で、各データを区切るために使用されます。各フォーム項目の先頭と末尾にあるフォーム (境界)、先頭の前に 2 つのマイナス記号

-- が追加され、全体の末尾に 2 つのマイナス記号が追加されます。フォームデータ。マイナス記号。リクエストヘッダーを確認してください:

boundary

が

content-type で定義されていることがわかります。そのため、次のように使用できます。分離記号を取得するメソッド:

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

Generate image

画像データimgData

を取得した後、次を使用できます。

fswriteFile() は、イメージを生成するファイルを書き込みます:

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

3 番目の部分で 'binary'

を渡す必要があることに注意してください。パラメータで

エンコーディング を設定します。 概要

コードは次のように要約されます:

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

以上がNode の http モジュールがファイルのアップロードを処理する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。