Di bagian ini, kami akan menerapkan pengunggahan pengguna dan menampilkan gambar di browser.
Modul eksternal yang ingin kami gunakan di sini adalah modul yang dapat dibentuk oleh simpul yang dikembangkan oleh Felix Geisendörfer. Itu membuat abstraksi yang baik dari data file yang diunggah parsing.
Untuk menginstal modul eksternal ini, Anda perlu menjalankan perintah di bawah CMD:
Salinan kode adalah sebagai berikut:
NPM menginstal tangguh
Jika Anda mengeluarkan informasi serupa, itu berarti bahwa instalasi telah berhasil:
Salinan kode adalah sebagai berikut:
Info NPM Membangun Sukses: [email protected]
Setelah instalasi berhasil, kami dapat menggunakan permintaan untuk memperkenalkannya:
Salinan kode adalah sebagai berikut:
var tangguh = membutuhkan ("tangguh");
Apa yang dilakukan modul ini di sini adalah menyelesaikan formulir yang dikirimkan melalui permintaan HTTP POST di Node.js. Yang harus kita lakukan adalah membuat informasi baru, yang merupakan representasi abstrak dari formulir yang dikirimkan. Setelah itu, kita dapat menggunakannya untuk menguraikan objek permintaan dan mendapatkan bidang data yang diperlukan dalam formulir.
File gambar dalam kasus ini disimpan di folder /TMP.
Mari kita selesaikan masalah pertama: Bagaimana kita bisa menampilkan file yang disimpan di hard drive lokal di browser?
Kami menggunakan modul FS untuk membaca file ke server.
Mari kita tambahkan /showUrl request handler, yang menggunakan hardcodes file /tmp/test.png Konten ke browser. Tentu saja, Anda perlu menyimpan gambar ke lokasi ini terlebih dahulu.
Tim kami meminta Handlers.js membuat beberapa modifikasi:
Salinan kode adalah sebagai berikut:
var querystring = membutuhkan ("querystring"),
fs = membutuhkan ("fs");
fungsi start (respons, postdata) {
console.log ("permintaan pawang 'start' dipanggil.");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "tipe konten"'+
'Content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<Form Action = "/unggah" Metode = "POST">'+
'<textarea name = "text" rows = "20" cols = "60"> </textarea>'+
'<input type = "kirim" value = "kirim teks" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead (200, {"tipe konten": "teks/html"});
response.write (tubuh);
response.end ();
}
unggah fungsi (respons, postdata) {
console.log ("unggahan unggahan 'pawang' dipanggil.");
response.writeHead (200, {"tipe konten": "teks/polos"});
response.write ("Anda telah mengirim teks:"+ queryString.parse (postdata) .text);
response.end ();
}
function show (response, postdata) {
console.log ("Permintaan penangan 'acara' dipanggil.");
fs.readfile ("/tmp/test.png", "biner", function (kesalahan, file) {
if (error) {
response.writeHead (500, {"tipe konten": "teks/polos"});
response.write (error + "/n");
response.end ();
} kalau tidak {
response.writeHead (200, {"tipe konten": "gambar/png"});
response.write (file, "biner");
response.end ();
}
});
}
Exports.start = Mulai;
Exports.upload = unggah;
Exports.show = show;
Kami juga perlu menambahkan penangan permintaan baru ini ke tabel peta rute di index.js:
Salinan kode adalah sebagai berikut:
var server = membutuhkan ("./ server");
var router = membutuhkan ("./ router");
var requesthandlers = membutuhkan ("./ requesthandlers");
var handle = {}
menangani ["/"] = requesthandlers.start;
menangani ["/start"] = requesthandlers.start;
menangani ["/unggah"] = requesthandlers.upload;
menangani ["/show"] = requesthandlers.show;
server.start (router.route, handle);
Setelah memulai kembali server, dengan mengunjungi http: // localhost: 8888/show, Anda dapat melihat gambar disimpan di /tmp/test.png.
Oke, pada akhirnya kami ingin:
Tambahkan elemen unggah file di formulir /Mulai
Mengintegrasikan Node-Formidable ke dalam Penangan Permintaan Upload kami untuk menyimpan gambar yang diunggah ke /tmp/test.png
embed gambar yang diunggah ke dalam output html dari /unggah
Item pertama sederhana. Cukup tambahkan tipe penyandian multipart/form-data di formulir HTML, hapus area teks sebelumnya, tambahkan komponen unggahan file, dan ubah salinan tombol kirim menjadi "Mengunggah file". Seperti yang ditunjukkan di RequestHandler.js sebagai berikut:
Salinan kode adalah sebagai berikut:
var querystring = membutuhkan ("querystring"),
fs = membutuhkan ("fs");
fungsi start (respons, postdata) {
console.log ("permintaan pawang 'start' dipanggil.");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "tipe konten"'+
'Content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<Form Action = "/unggah" enctype = "multipart/form-data"'+
'Method = "Post">'+
'<input type = "file" name = "unggah">'+
'<input type = "kirim" value = "unggah file" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead (200, {"tipe konten": "teks/html"});
response.write (tubuh);
response.end ();
}
unggah fungsi (respons, postdata) {
console.log ("unggahan unggahan 'pawang' dipanggil.");
response.writeHead (200, {"tipe konten": "teks/polos"});
response.write ("Anda telah mengirim teks:"+ queryString.parse (postdata) .text);
response.end ();
}
function show (response, postdata) {
console.log ("Permintaan penangan 'acara' dipanggil.");
fs.readfile ("/tmp/test.png", "biner", function (kesalahan, file) {
if (error) {
response.writeHead (500, {"tipe konten": "teks/polos"});
response.write (error + "/n");
response.end ();
} kalau tidak {
response.writeHead (200, {"tipe konten": "gambar/png"});
response.write (file, "biner");
response.end ();
}
});
}
Exports.start = Mulai;
Exports.upload = unggah;
Exports.show = show;
Selanjutnya, kita perlu menyelesaikan langkah kedua. Kami mulai dengan server.js - hapus pemrosesan postdata dan request.setencoding (bagian dari simpul ini akan menanganinya sendiri), dan sebaliknya meneruskan objek permintaan ke rute permintaan:
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var url = membutuhkan ("url");
fungsi start (rute, handle) {
function onRequest (request, response) {
var pathname = url.parse (request.url) .pathname;
Console.log ("Permintaan" + Pathname + "Diterima.");
rute (pegangan, pathname, respons, permintaan);
}
http.createServer (onRequest) .listen (8888);
Console.log ("Server telah dimulai.");
}
Exports.start = Mulai;
Selanjutnya, ubah router.js, dan kali ini Anda perlu meneruskan objek permintaan:
Salinan kode adalah sebagai berikut:
rute fungsi (pegangan, pathname, respons, permintaan) {
console.log ("Akan merutekan permintaan untuk" + pathname);
if (typeof handle [pathname] === 'function') {
menangani [pathname] (respons, permintaan);
} kalau tidak {
console.log ("Tidak ada penangan permintaan yang ditemukan untuk" + pathname);
response.writeHead (404, {"tipe konten": "text/html"});
response.write ("404 tidak ditemukan");
response.end ();
}
}
Exports.Route = rute;
Sekarang, objek permintaan dapat digunakan dalam penangan permintaan unggahan kami. Node-Formidable akan menangani menyimpan file yang diunggah ke direktori lokal /TMP, dan kami perlu
Yang ingin Anda lakukan adalah memastikan bahwa file tersebut disimpan sebagai /tmp/test.png.
Selanjutnya, kami menyusun operasi pemrosesan unggahan file dan penggantian nama, seperti yang ditunjukkan pada requesthandlers.js:
Salinan kode adalah sebagai berikut:
var querystring = membutuhkan ("querystring"),
fs = membutuhkan ("fs"),
tangguh = membutuhkan ("tangguh");
fungsi start (response) {
console.log ("permintaan pawang 'start' dipanggil.");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "konten-tipe" content = "text/html;'+
'Charset = UTF-8 " />'+
'</head>'+
'<body>'+
'<Form Action = "/unggah" enctype = "multipart/form-data"'+
'Method = "Post">'+
'<input type = "file" name = "unggah" multiple = "ganda">'+
'<input type = "kirim" value = "unggah file" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead (200, {"tipe konten": "teks/html"});
response.write (tubuh);
response.end ();
}
unggah fungsi (respons, permintaan) {
console.log ("unggahan unggahan 'pawang' dipanggil.");
var Form = new paceidable.incomingform ();
console.log ("akan parse");
form.parse (permintaan, fungsi (kesalahan, bidang, file) {
Console.log ("Parsing Done");
fs.renamesync (file.upload.path, "/tmp/test.png");
response.writeHead (200, {"tipe konten": "teks/html"});
response.write ("gambar yang diterima: <br/>");
response.write ("<img src = ' /show' />");
response.end ();
});
}
function show (response) {
console.log ("Permintaan penangan 'acara' dipanggil.");
fs.readfile ("/tmp/test.png", "biner", function (kesalahan, file) {
if (error) {
response.writeHead (500, {"tipe konten": "teks/polos"});
response.write (error + "/n");
response.end ();
} kalau tidak {
response.writeHead (200, {"tipe konten": "gambar/png"});
response.write (file, "biner");
response.end ();
}
});
}
Exports.start = Mulai;
Exports.upload = unggah;
Exports.show = show;
Dengan melakukan ini, semua server kami selesai.
Selama proses mengunggah gambar, beberapa orang mungkin mengalami masalah seperti itu:
Saya kira alasan untuk masalah ini disebabkan oleh partisi disk. Untuk mengatasi masalah ini, Anda perlu mengubah jalur folder nol-waktu default yang tangguh untuk memastikan bahwa itu berada pada partisi disk yang sama dengan direktori target.
Kami menemukan fungsi unggahan dari requesthandlers.js dan membuat beberapa modifikasi untuk itu:
Salinan kode adalah sebagai berikut:
unggah fungsi (respons, permintaan) {
console.log ("unggahan unggahan 'pawang' dipanggil.");
var Form = new paceidable.incomingform ();
console.log ("akan parse");
Form.uploaddir = "TMP";
form.parse (permintaan, fungsi (kesalahan, bidang, file) {
Console.log ("Parsing Done");
fs.renamesync (file.upload.path, "/tmp/test.png");
response.writeHead (200, {"tipe konten": "teks/html"});
response.write ("gambar yang diterima: <br/>");
response.write ("<img src = ' /show' />");
response.end ();
});
}
Kami menambahkan formulir kalimat. Uploaddir = "TMP". Sekarang restart server dan kemudian lakukan operasi unggahan. Masalahnya terpecahkan dengan sempurna.