このセクションでは、ユーザーが画像をアップロードしてブラウザに画像を表示します。
ここで使用する外部モジュールは、FelixGeisendörferが開発したノード形成可能なモジュールです。アップロードされたファイルデータを解析することを適切に抽象化します。
この外部モジュールをインストールするには、CMDでコマンドを実行する必要があります。
コードコピーは次のとおりです。
NPMインストールFrididable
同様の情報を出力する場合、インストールが成功したことを意味します。
コードコピーは次のとおりです。
npm情報の構築成功：[email protected]
インストールが成功した後、リクエストを使用して紹介できます。
コードコピーは次のとおりです。
var fromidable = require（ "fedidable"）;
ここでこのモジュールが行うことは、node.jsのHTTP POSTリクエストを介して送信されたフォームを解決することです。私たちがしなければならないのは、提出されたフォームの抽象的な表現である新しいIncomingFormを作成することです。その後、リクエストオブジェクトを解析し、必要なデータフィールドをフォームに取得するために使用できます。
この場合の画像ファイルは、 /TMPフォルダーに保存されます。
最初に問題を解決しましょう。ブラウザのローカルハードドライブに保存されたファイルを表示するにはどうすればよいですか？
FSモジュールを使用して、ファイルをサーバーに読み取ります。
/showurl要求ハンドラーを追加しましょう。これは、ファイル/tmp/test.pngコンテンツをブラウザにハードコードします。もちろん、最初に画像をこの場所に保存する必要があります。
私たちのチームのrequesthandlers.jsはいくつかの変更を加えます：
コードコピーは次のとおりです。
var querystring = require（ "querystring"）、
fs = require（ "fs"）;
関数開始（応答、postdata）{
console.log（ "request handler 'start'が呼び出されました。"）;
var body = '<html>'+
'<head>'+
'<メタhttp-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" method = "post">'+
'<textarea name = "text" rows = "20" cols = "60"> </textarea>'+
'<入力型= "submit" value = "text" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead（200、{"content-type"： "text/html"}）;
Response.write（body）;
Response.End（）;
}
関数アップロード（Response、Postdata）{
console.log（ "要求ハンドラー 'アップロード'が呼び出されました。"）;
Response.writehead（200、{"content-type"： "text/plain"}）;
respons.write（ "テキストを送信しました："+ querystring.parse（postdata）.text）;
Response.End（）;
}
function show（Response、postdata）{
console.log（ "request handler 'show'が呼び出されました。"）;
fs.readfile（ "/tmp/test.png"、 "binary"、function（error、file）{
if（error）{
Response.writehead（500、{"content-type"： "text/plain"}）;
Response.write（error + "/n"）;
Response.End（）;
} それ以外 {
Response.writehead（200、{"content-type"： "image/png"}）;
Response.write（file、 "binary"）;
Response.End（）;
}
}）;
}
exports.start = start;
exports.upload = upload;
exports.show = show;
また、この新しいリクエストハンドラーをindex.jsのルートマップテーブルに追加する必要があります。
コードコピーは次のとおりです。
var server = require（ "./ server"）;
var router = require（ "./ router"）;
var requesthandlers = require（ "./ requesthandlers"）;
var handle = {}
["/"] = requesthandlers.start;
["/start"] = requesthandlers.start;
["/upload"] = requesthandlers.upload;
["/show"] = requesthandlers.show;
server.start（router.route、handle）;
サーバーを再起動した後、http：// localhost：8888/showにアクセスして、/tmp/test.pngに保存されている写真を見ることができます。
OK、最終的に私たちは望んでいます：
/startフォームにファイルアップロード要素を追加する
アップロードされた画像を/tmp/test.pngに保存するために、ノードフォーミッドをアップロードリクエストハンドラーに統合します
アップロードされた画像を /uploadurlからのHTML出力に埋め込みます
最初のアイテムはシンプルです。 HTMLフォームにMultiPart/Form-Dataエンコードタイプを追加し、以前のテキスト領域を削除し、ファイルアップロードコンポーネントを追加し、送信ボタンのコピーを「ファイルのアップロード」に変更します。 requesthandler.jsに次のように示されているように：
コードコピーは次のとおりです。
var querystring = require（ "querystring"）、
fs = require（ "fs"）;
関数開始（応答、postdata）{
console.log（ "request handler 'start'が呼び出されました。"）;
var body = '<html>'+
'<head>'+
'<メタhttp-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" enctype = "multipart/form-data"'+
'method = "post">'+
'<入力型= "ファイル" name = "upload">'+
'<input type = "submit" value = "file" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead（200、{"content-type"： "text/html"}）;
Response.write（body）;
Response.End（）;
}
関数アップロード（Response、Postdata）{
console.log（ "要求ハンドラー 'アップロード'が呼び出されました。"）;
Response.writehead（200、{"content-type"： "text/plain"}）;
respons.write（ "テキストを送信しました："+ querystring.parse（postdata）.text）;
Response.End（）;
}
function show（Response、postdata）{
console.log（ "request handler 'show'が呼び出されました。"）;
fs.readfile（ "/tmp/test.png"、 "binary"、function（error、file）{
if（error）{
Response.writehead（500、{"content-type"： "text/plain"}）;
Response.write（error + "/n"）;
Response.End（）;
} それ以外 {
Response.writehead（200、{"content-type"： "image/png"}）;
Response.write（file、 "binary"）;
Response.End（）;
}
}）;
}
exports.start = start;
exports.upload = upload;
exports.show = show;
次に、2番目のステップを完了する必要があります。 server.jsから始めます - postdataとrequest.setEncodingの処理を削除します（ノード形式のこの部分はそれ自体を処理します）、代わりにリクエストオブジェクトをリクエストルートに渡します。
コードコピーは次のとおりです。
var http = require（ "http"）;
var url = require（ "url"）;
関数開始（ルート、ハンドル）{
function onrequest（request、response）{
var pathname = url.parse（request.url）.pathname;
console.log（ "request for" + pathname + "受信"）;
ルート（ハンドル、パス名、応答、リクエスト）;
}
http.createserver（onrequest）.listen（8888）;
console.log（ "サーバーが開始されました。"）;
}
exports.start = start;
次に、router.jsを変更すると、今回はリクエストオブジェクトを渡す必要があります。
コードコピーは次のとおりです。
関数ルート（ハンドル、パス名、応答、リクエスト）{
console.log（ "" + pathnameのリクエストをルーティングしようとしています）;
if（typeof handle [pathname] === 'function'）{
[pathname]（応答、リクエスト）;
} それ以外 {
console.log（ "" + pathnameのリクエストハンドラーは見つかりません）;
Response.writehead（404、{"content-type"： "text/html"}）;
Response.write（ "404 not not fund"）;
Response.End（）;
}
}
exports.route = route;
これで、リクエストオブジェクトをアップロードリクエストハンドラーで使用できます。 Node-Formidableは、アップロードされたファイルをローカル /TMPディレクトリに保存することを処理し、必要です
あなたがしたいのは、ファイルが/tmp/test.pngとして保存されていることを確認することです。
次に、requesthandlers.jsに示すように、ファイルのアップロードと名前変更の操作をまとめました。
コードコピーは次のとおりです。
var querystring = require（ "querystring"）、
fs = require（ "fs"）、
fromidable = require（ "fedidable"）;
関数開始（応答）{
console.log（ "request handler 'start'が呼び出されました。"）;
var body = '<html>'+
'<head>'+
'<Meta http-equiv = "content-type" content = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" enctype = "multipart/form-data"'+
'method = "post">'+
'<入力型= "ファイル" name = "upload"倍数= "倍数">'+
'<input type = "submit" value = "file" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead（200、{"content-type"： "text/html"}）;
Response.write（body）;
Response.End（）;
}
関数アップロード（応答、リクエスト）{
console.log（ "要求ハンドラー 'アップロード'が呼び出されました。"）;
var form = new fordidable.incomingform（）;
console.log（ "解析しようとしている"）;
form.parse（request、function（error、fields、files）{
console.log（ "parsing done"）;
fs.renamesync（files.upload.path、 "/tmp/test.png"）;
Response.writehead（200、{"content-type"： "text/html"}）;
Response.write（ "受信画像：<br/>"）;
respons.write（ "<img src = ' /show' />"）;
Response.End（）;
}）;
}
関数show（応答）{
console.log（ "request handler 'show'が呼び出されました。"）;
fs.readfile（ "/tmp/test.png"、 "binary"、function（error、file）{
if（error）{
Response.writehead（500、{"content-type"： "text/plain"}）;
Response.write（error + "/n"）;
Response.End（）;
} それ以外 {
Response.writehead（200、{"content-type"： "image/png"}）;
Response.write（file、 "binary"）;
Response.End（）;
}
}）;
}
exports.start = start;
exports.upload = upload;
exports.show = show;
これを行うことにより、私たちのサーバーはすべて完成します。
画像をアップロードする過程で、一部の人々はそのような問題に遭遇する可能性があります。
この問題の理由は、ディスクパーティションによって引き起こされると思います。この問題を解決するには、Defidableのデフォルトのゼロタイムフォルダーパスを変更して、ターゲットディレクトリと同じディスクパーティションにあることを確認する必要があります。
requesthandlers.jsのアップロード関数を見つけ、次のいくつかの変更を行いました。
コードコピーは次のとおりです。
関数アップロード（応答、リクエスト）{
console.log（ "要求ハンドラー 'アップロード'が呼び出されました。"）;
var form = new fordidable.incomingform（）;
console.log（ "解析しようとしている"）;
form.uploaddir = "tmp";
form.parse（request、function（error、fields、files）{
console.log（ "parsing done"）;
fs.renamesync（files.upload.path、 "/tmp/test.png"）;
Response.writehead（200、{"content-type"： "text/html"}）;
Response.write（ "受信画像：<br/>"）;
respons.write（ "<img src = ' /show' />"）;
Response.End（）;
}）;
}
form.uploaddir = "tmp"を追加しました。次に、サーバーを再起動してから、アップロード操作を実行します。問題は完全に解決されます。