Buat pelayan nodejs dengan mudah (10): kendalikan images_node.js yang dimuat naik

Dalam bahagian ini kami akan melaksanakan bahawa pengguna memuat naik gambar dan memaparkan gambar dalam penyemak imbas.

Modul luaran yang akan kami gunakan di sini ialah modul hebat nod yang dibangunkan oleh Felix Geisendörfer. Ia menjadikan abstraksi yang baik untuk menghuraikan data fail yang dimuat naik.

Untuk memasang modul luaran ini, anda perlu melaksanakan arahan di bawah cmd:

Salin kod Kod adalah seperti berikut:

npm pasang menggerunkan

Jika maklumat serupa dikeluarkan, pemasangan berjaya:

Salin kod Kod adalah seperti berikut:

npm info build Kejayaan: formidable@1.0.14

Selepas pemasangan berjaya, kami boleh menggunakan permintaan untuk memperkenalkannya:

Salin kod Kod adalah seperti berikut:

var menggerunkan = memerlukan("gerun");

Perkara yang dilakukan oleh modul ini di sini ialah untuk menukar borang yang diserahkan melalui permintaan HTTP POST, yang boleh dihuraikan dalam Node.js. Apa yang perlu kita lakukan ialah mencipta IncomingForm baharu, yang merupakan perwakilan abstrak bagi borang penyerahan Selepas itu, kita boleh menggunakannya untuk menghuraikan objek permintaan dan mendapatkan medan data yang diperlukan dalam borang.

Fail imej kes artikel ini disimpan dalam folder /tmp.

Mari selesaikan masalah dahulu: Bagaimana untuk memaparkan fail yang disimpan pada pemacu keras tempatan dalam penyemak imbas?

Kami menggunakan modul fs untuk membaca fail ke dalam pelayan.

Mari tambah pengendali permintaan untuk /showURL, yang secara langsung dikod keras untuk memaparkan kandungan fail /tmp/test.png ke penyemak imbas. Sudah tentu, anda perlu menyimpan imej ke lokasi ini terlebih dahulu.

Pasukan kami akan membuat beberapa pengubahsuaian pada requestHandlers.js:

Salin kod Kod adalah seperti berikut:

var querystring = memerlukan("querystring"),
fs = memerlukan("fs");
fungsi mula(respon, postData) {
console.log("Permintaan pengendali 'mula' dipanggil.");
var body = ''
''
' 'content="text/html; charset=UTF-8" />'
''
''
'

'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
respons.write(body);
response.end();
}
muat naik fungsi(respons, postData) {
console.log("Pengendali permintaan 'muat naik' telah dipanggil.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Anda telah menghantar teks: " querystring.parse(postData).text);
response.end();
}
function show(respons, postData) {
console.log("Permintaan pengendali 'tunjukkan' telah dipanggil.");
fs.readFile("/tmp/test.png", "binary", function(ralat, fail) {
jika(ralat) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(ralat "n");
response.end();
} lain {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(fail, "perduaan");
response.end();
}
});
}
exports.start = mula;
exports.upload = muat naik;
exports.show = tunjukkan;

Kami juga perlu menambah pengendali permintaan baharu ini pada peta laluan dalam index.js:

Salin kod Kod adalah seperti berikut:

var pelayan = memerlukan("./server");
var penghala = memerlukan("./penghala");
var requestHandlers = memerlukan("./requestHandlers");
pemegang var = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

Selepas memulakan semula pelayan, anda boleh melihat imej yang disimpan dalam /tmp/test.png dengan melawati http://localhost:8888/show.

Baiklah, perkara terakhir yang kami mahu ialah:

 Tambahkan elemen muat naik fail pada borang /start

 Integrasikan nod-formidable ke dalam pengendali permintaan muat naik kami untuk menyimpan imej yang dimuat naik ke /tmp/test.png

 Benamkan imej yang dimuat naik ke dalam output HTML oleh /uploadURL

Item pertama adalah mudah. Cuma tambahkan jenis pengekodan berbilang bahagian/data borang pada borang HTML, alih keluar kawasan teks sebelumnya, tambah komponen muat naik fail dan tukar salinan butang serah kepada "Muat naik fail". Seperti yang ditunjukkan dalam requestHandler.js di bawah:

Salin kod Kod adalah seperti berikut:

var querystring = memerlukan("querystring"),
fs = memerlukan("fs");
fungsi mula(respon, postData) {
console.log("Permintaan pengendali 'mula' dipanggil.");
var body = ''
''
' 'content="text/html; charset=UTF-8" />'
''
''
'

'method="post">'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
respons.write(body);
response.end();
}
muat naik fungsi(respons, postData) {
console.log("Pengendali permintaan 'muat naik' telah dipanggil.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Anda telah menghantar teks: " querystring.parse(postData).text);
response.end();
}
function show(respons, postData) {
console.log("Permintaan pengendali 'tunjukkan' telah dipanggil.");
fs.readFile("/tmp/test.png", "binary", function(ralat, fail) {
jika(ralat) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(ralat "n");
response.end();
} lain {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(fail, "perduaan");
response.end();
}
});
}
exports.start = mula;
exports.upload = muat naik;
exports.show = tunjukkan;

Seterusnya, kita perlu melengkapkan langkah kedua Kita mulakan dengan server.js - alih keluar pemprosesan postData dan request.setEncoding (bahagian nod-formidable itu sendiri akan mengendalikan), dan sebaliknya menghantar objek permintaan kepada Cara meminta. penghalaan:

Salin kod Kod adalah seperti berikut:

var http = memerlukan("http");
var url = memerlukan("url");
mulakan fungsi(laluan, pemegang) {
fungsi onRequest(permintaan, respons) {
var pathname = url.parse(request.url).pathname;
console.log("Permintaan untuk " nama laluan " diterima.");
laluan(pengendalian, nama laluan, respons, permintaan);
}
http.createServer(onRequest).listen(8888);
console.log("Pelayan telah bermula.");
}
exports.start = mula;

Seterusnya, ubah suai router.js, kali ini lulus objek permintaan:

Salin kod Kod adalah seperti berikut:

laluan fungsi(pengendali, nama laluan, respons, permintaan) {
console.log("Tentang menghalakan permintaan untuk " nama laluan);
if (jenis pemegang[nama laluan] === 'fungsi') {
mengendalikan [nama laluan](tindak balas, permintaan);
} lain {
console.log("Tiada pengendali permintaan ditemui untuk " nama laluan);
response.writeHead(404, {"Content-Type": "text/html"});
response.write("404 Tidak dijumpai");
response.end();
}
}
exports.route = laluan;

Kini objek permintaan boleh digunakan dalam pengendali permintaan muat naik kami. node-formidable akan mengendalikan menyimpan fail yang dimuat naik ke direktori /tmp tempatan, dan kita perlu

Apa yang perlu dilakukan ialah memastikan fail disimpan sebagai /tmp/test.png.

Seterusnya, kami menyusun operasi memproses muat naik fail dan menamakan semula, seperti yang ditunjukkan dalam requestHandlers.js di bawah:

Salin kod Kod adalah seperti berikut:

var querystring = memerlukan("querystring"),
fs = memerlukan("fs"),
menggerunkan = memerlukan("gerun");
fungsi mula(tindak balas) {
console.log("Permintaan pengendali 'mula' dipanggil.");
var body = ''
''
''
''
''
'

'method="post">'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
respons.write(body);
response.end();
}
muat naik fungsi(tindak balas, permintaan) {
console.log("Pengendali permintaan 'muat naik' telah dipanggil.");
var form = new formidable.IncomingForm();
console.log("tentang menghuraikan");
form.parse(permintaan, fungsi(ralat, medan, fail) {
console.log("penghuraian selesai");
fs.renameSync(files.upload.path, "/tmp/test.png");
response.writeHead(200, {"Content-Type": "text/html"});
response.write("imej yang diterima:
");
response.write("");
response.end();
});
}
tunjuk fungsi(tindak balas) {
console.log("Permintaan pengendali 'tunjukkan' telah dipanggil.");
fs.readFile("/tmp/test.png", "binary", function(ralat, fail) {
jika(ralat) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(ralat "n");
response.end();
} lain {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(fail, "perduaan");
response.end();
}
});
}
exports.start = mula;
exports.upload = muat naik;
exports.show = tunjukkan;

Selepas melakukan ini, pelayan kami selesai.

Semasa proses memuat naik imej, sesetengah orang mungkin menghadapi masalah berikut:

Saya rasa punca masalah ini disebabkan oleh partition cakera Untuk menyelesaikan masalah ini, anda perlu menukar laluan folder masa sifar lalai yang menggerunkan untuk memastikan ia berada dalam partition cakera yang sama dengan direktori sasaran.

Kami menemui fungsi muat naik requestHandlers.js dan membuat beberapa pengubahsuaian padanya:

Salin kod Kod adalah seperti berikut:

muat naik fungsi(tindak balas, permintaan) {
console.log("Pengendali permintaan 'muat naik' telah dipanggil."); var form = new formidable.IncomingForm(); console.log("tentang menghuraikan");

form.uploadDir = "tmp";

form.parse(permintaan, fungsi(ralat, medan, fail) {
console.log("penghuraian selesai"); fs.renameSync(files.upload.path, "/tmp/test.png"); response.writeHead(200, {"Content-Type": "text/html"});
response.write("imej yang diterima:
"); response.write("");
response.end();
});
}


Kami menambah bentuk ayat.uploadDir = "tmp", kini mulakan semula pelayan, dan kemudian lakukan operasi muat naik, masalah itu diselesaikan dengan sempurna.