簡単にnodejsサーバーを作成する(10):アップロードされたimages_node.jsを処理する

このセクションでは、ユーザーが写真をアップロードし、その写真をブラウザーに表示することを実装します。

ここで使用する外部モジュールは、Felix Geisendörfer によって開発されたノード強力なモジュールです。これは、アップロードされたファイル データを解析するための優れた抽象化を実現します。

この外部モジュールをインストールするには、cmd で次のコマンドを実行する必要があります:

コードをコピー コードは次のとおりです:

npm install 恐るべき

同様の情報が出力されれば、インストールは成功です:

コードをコピー コードは次のとおりです:

npm info ビルド成功: formidable@1.0.14

インストールが成功したら、リクエストを使用して導入できます:

コードをコピー コードは次のとおりです:

var formidable = require(“formidable”);

このモジュールがここで行うことは、HTTP POST リクエストを通じて送信されたフォームを変換し、Node.js で解析できるようにすることです。必要なのは、送信されたフォームの抽象表現である新しい IncomingForm を作成することだけです。その後、それを使用してリクエスト オブジェクトを解析し、フォーム内の必要なデータ フィールドを取得できます。

この記事の事例の画像ファイルは /tmp フォルダーに保存されています。

まず問題を解決しましょう: ローカル ハード ドライブに保存されたファイルをブラウザで表示するにはどうすればよいですか?

サーバーにファイルを読み取るには fs モジュールを使用します。

/showURL のリクエスト ハンドラーを追加しましょう。これは、ファイル /tmp/test.png の内容をブラウザーに表示するために直接ハードコーディングされています。もちろん、最初に画像をこの場所に保存する必要があります。

私たちのチームは requestHandlers.js にいくつかの変更を加えます:

コードをコピーします コードは次のとおりです:

var querystring = require("querystring"),
fs = require("fs");
function start(response, postData) {
console.log("リクエストハンドラー「start」が呼び出されました。");
var body = ''
'<頭>'
' 'content="text/html; charset=UTF-8" />' ''
'<ボディ>'
'<フォームアクション="/アップロード"メソッド="ポスト">' '' '' ''
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
応答.write(本文);
応答.end();
}
関数アップロード(応答、postData) {
console.log("リクエストハンドラー「アップロード」が呼び出されました。");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("次のテキストを送信しました: " querystring.parse(postData).text);
応答.end();
}
関数 show(response, postData) {
console.log("リクエストハンドラー「show」が呼び出されました。");
fs.readFile("/tmp/test.png", "バイナリ", function(error, file) {
if(エラー) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(エラー "n");
応答.end();
} else {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "バイナリ");
応答.end();
}
});
}
exports.start = 開始;
exports.upload = アップロード;
exports.show = 表示;



この新しいリクエスト ハンドラーをindex.js のルート マップに追加する必要もあります。

コードをコピー

コードは次のとおりです:

var サーバー = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var ハンドル = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

サーバーを再起動した後、http://localhost:8888/show にアクセスすると、/tmp/test.png に保存されたイメージを確認できます。

わかりました、私たちが望んでいないことは次のとおりです:

 /start フォームにファイル アップロード要素を追加します

 アップロードされた画像を /tmp/test.png に保存するために、node-foridable をアップロード リクエスト ハンドラーに統合します

 /uploadURL

により、アップロードされた画像を HTML 出力に埋め込みます。

最初の項目はシンプルです。 multipart/form-data エンコーディング タイプを HTML フォームに追加し、前のテキスト領域を削除し、ファイル アップロード コンポーネントを追加し、送信ボタンのコピーを「ファイルのアップロード」に変更するだけです。 以下の requestHandler.js に示すように:

コードをコピーします コードは次のとおりです:

var querystring = require("querystring"),
fs = require("fs");
function start(response, postData) {
console.log("リクエストハンドラー「start」が呼び出されました。");
var body = ''
'<頭>'
' 'content="text/html; charset=UTF-8" />' ''
'<ボディ>'
'

'メソッド="投稿">
''
'' ''
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
応答.write(本文);
応答.end();
}
関数アップロード(応答、postData) {
console.log("リクエストハンドラー「アップロード」が呼び出されました。");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("次のテキストを送信しました: " querystring.parse(postData).text);
応答.end();
}
関数 show(response, postData) {
console.log("リクエストハンドラー「show」が呼び出されました。");
fs.readFile("/tmp/test.png", "バイナリ", function(error, file) {
if(エラー) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(エラー "n");
応答.end();
} else {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "バイナリ");
応答.end();
}
});
}
exports.start = 開始;
exports.upload = アップロード;
exports.show = 表示;

次に、2 番目のステップを完了する必要があります。server.js から開始します。postData と request.setEncoding の処理を​​削除し (この部分は、node-formidable 自体が処理します)、代わりにリクエスト オブジェクトを How to に渡します。リクエストルーティング:

コードをコピーします コードは次のとおりです:

var http = require("http");

var url = require("url");
function start(route, handle) {
function onRequest(リクエスト, レスポンス) {
var pathname = url.parse(request.url).pathname;
console.log("「 pathname " のリクエストを受信しました。」);
ルート(ハンドル、パス名、応答、リクエスト);
}
http.createServer(onRequest).listen(8888);
console.log("サーバーが起動しました。");
}
exports.start = 開始;

次に、router.js を変更し、今回はリクエスト オブジェクトを渡します:

コードをコピー コードは次のとおりです:

関数ルート(ハンドル、パス名、応答、リクエスト) {
console.log("パス名に対するリクエストをルーティングしようとしています);
if (ハンドルの種類[パス名] === '関数') {
ハンドル[パス名](応答、要求);
} else {
console.log("パス名に対するリクエスト ハンドラーが見つかりません);
response.writeHead(404, {"Content-Type": "text/html"});
response.write("404 見つかりません");
応答.end();
}
}
exports.route = ルート;

これで、リクエスト オブジェクトをアップロード リクエスト ハンドラーで使用できるようになりました。 node-formidable は、アップロードされたファイルをローカルの /tmp ディレクトリに保存する処理を行います。

を行う必要があります。

ファイルが /tmp/test.png として保存されていることを確認してください。

次に、以下の requestHandlers.js に示すように、ファイルのアップロードと名前変更の処理の操作をまとめます。

コードをコピーします コードは次のとおりです:

var querystring = require("querystring"),
fs = require("fs"),
恐るべき = require("恐るべき");
関数開始(応答) {
console.log("リクエストハンドラー「start」が呼び出されました。");
var body = ''
'<頭>'
''
''
'<ボディ>'
' 'メソッド="投稿">
''
'' ''
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
応答.write(本文);
応答.end();
}
関数アップロード(応答、要求) {
console.log("リクエストハンドラー「アップロード」が呼び出されました。");
var form = new formidable.IncomingForm();
console.log("解析しようとしています");
form.parse(リクエスト、関数(エラー、フィールド、ファイル) {
console.log("解析完了");
fs.renameSync(files.upload.path, "/tmp/test.png");
response.writeHead(200, {"Content-Type": "text/html"});
response.write("受信した画像:
");
response.write("");
応答.end();
});
}
関数 show(応答) {
console.log("リクエストハンドラー「show」が呼び出されました。");
fs.readFile("/tmp/test.png", "バイナリ", function(error, file) {
if(エラー) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(エラー "n");
応答.end();
} else {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "バイナリ");
応答.end();
}
});
}
exports.start = 開始;
exports.upload = アップロード;
exports.show = 表示;

これを実行すると、サーバーが完成します。

画像をアップロードするプロセス中に、次の問題が発生する可能性があります:

この問題の原因はディスク パーティションにあると思います。この問題を解決するには、formidable のデフォルトのゼロタイム フォルダー パスを変更して、ターゲット ディレクトリと同じディスク パーティションに存在するようにする必要があります。

requestHandlers.js のアップロード関数を見つけて、それにいくつかの変更を加えます。

コードをコピー コードは次のとおりです:

関数アップロード(応答、要求) {
console.log("リクエストハンドラー「アップロード」が呼び出されました。"); var form = new formidable.IncomingForm(); console.log("解析しようとしています");

form.uploadDir = "tmp";

form.parse(リクエスト、関数(エラー、フィールド、ファイル) {
console.log("解析が完了しました"); fs.renameSync(files.upload.path, "/tmp/test.png"); response.writeHead(200, {"Content-Type": "text/html"}); response.write("受信した画像:
"); response.write(""); 応答.end(); });
}


form.uploadDir = “tmp” という文を追加し、サーバーを再起動してアップロード操作を実行すると、問題は完全に解決されました。