簡単にnodejsサーバーを作成する(10):アップロードされたimages_node.jsを処理する-jsチュートリアル-php.cn

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

ここで使用する外部モジュールは、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 サーバー = 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 に示すように:

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

'メソッド="投稿">
''
'' ''
''
'';
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 に示すように、ファイルのアップロードと名前変更の処理の操作をまとめます。

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

");
応答.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” という文を追加し、サーバーを再起動してアップロード操作を実行すると、問題は完全に解決されました。