В этом разделе мы будем реализовать пользователь, загружающий изображение, и отобразить изображение в браузере.
Внешний модуль, который мы хотим использовать здесь,-это узел-модуль, разработанный Felix Geisendörfer. Это делает хорошую абстракцию загруженного файла данных.
Чтобы установить этот внешний модуль, вам необходимо выполнить команду в соответствии с CMD:
Кода -копия выглядит следующим образом:
NPM Установите комплексную
Если вы выводите аналогичную информацию, это означает, что установка была успешной:
Кода -копия выглядит следующим образом:
NPM Info Строительство Успех: [email protected]
После успешной установки мы можем использовать запрос для его представления:
Кода -копия выглядит следующим образом:
var formidable = require ("Commidable");
Что делает этот модуль здесь, так это разрешить форму, представленную через запрос на http post в node.js. Все, что нам нужно сделать, это создать новую входящую форму, которая является абстрактным представлением представленной формы. После этого мы можем использовать его для анализа объекта запроса и получить необходимые поля данных в форме.
Файлы изображений в этом случае хранятся в папке /TMP.
Давайте сначала решим проблему: как мы можем отображать файлы, сохраненные на локальном жестком диске в браузере?
Мы используем модуль FS для чтения файла на сервер.
Давайте добавим обработчик запроса /Showurl, который жестко жестко подходит в браузере. Конечно, вам нужно сначала сохранить изображение в этом месте.
Наша команда requestHandlers.js вносит некоторые изменения:
Кода -копия выглядит следующим образом:
var QueryString = require ("queryString"),
fs = require ("fs");
function start (response, postdata) {
console.log ("запрос обработчика" был вызван.
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" method = "post">'+
'<textarea name = "text" row = "20" cols = "60"> </textarea>'+
'<input type = "Отправить" value = "Отправить текст" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, {"content-type": "text/html"});
response.write (тело);
response.end ();
}
функция загрузка (ответ, postdata) {
console.log («обработчик запроса» был вызван загрузкой '. »);
response.writehead (200, {"content-type": "text/plain"});
response.write («Вы отправили текст:»+ QueryString.parse (postdata) .Text);
response.end ();
}
Функция Show (response, postdata) {
Console.log («Показатель запроса» был вызван. »);
fs.readfile ("/tmp/test.png", "Binary", function (ошибка, файл) {
if (ошибка) {
response.writehead (500, {"контент-тип": "text/plain"});
response.write (error + "/n");
response.end ();
} еще {
response.writehead (200, {"контент-тип": "Image/png"});
response.write (файл, «двоичный»);
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 harder = {}
gange ["/"] = requestHandlers.start;
handle ["/start"] = requestHandlers.start;
обрабатывать ["/upload"] = requestHandlers.upload;
Руководство ["/show"] = requestHandlers.show;
Server.Start (Router.Route, Handle);
После перезапуска сервера, посетив http: // localhost: 8888/show, вы можете увидеть картинку, сохранившуюся в commp/test.png.
Хорошо, в конце концов мы хотим:
Добавить элемент загрузки файла в форму /старт
Интегрируйте обработчики на нашем обработчике запроса на загрузку, чтобы сохранить загруженные изображения в /tmp/test.png
Встроен загруженное изображение в вывод HTML из /uploadUrl
Первый пункт прост. Просто добавьте тип кодирования Multipart/Form-Data в форму HTML, удалите предыдущую текстовую область, добавьте компонент загрузки файла и измените копию кнопки «Отправить» на «Загрузить файл». Как показано в requestHandler.js следующим образом:
Кода -копия выглядит следующим образом:
var QueryString = require ("queryString"),
fs = require ("fs");
function start (response, postdata) {
console.log ("запрос обработчика" был вызван.
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" ectype = "multipart/form-data"'+
'method = "post">'+
'<input type = "file" name = "upload">'+
'<input type = "Opper" value = "upload file" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, {"content-type": "text/html"});
response.write (тело);
response.end ();
}
функция загрузка (ответ, postdata) {
console.log («обработчик запроса» был вызван загрузкой '. »);
response.writehead (200, {"content-type": "text/plain"});
response.write («Вы отправили текст:»+ QueryString.parse (postdata) .Text);
response.end ();
}
Функция Show (response, postdata) {
Console.log («Показатель запроса» был вызван. »);
fs.readfile ("/tmp/test.png", "Binary", function (ошибка, файл) {
if (ошибка) {
response.writehead (500, {"контент-тип": "text/plain"});
response.write (error + "/n");
response.end ();
} еще {
response.writehead (200, {"контент-тип": "Image/png"});
response.write (файл, «двоичный»);
response.end ();
}
});
}
exports.start = start;
exports.upload = upload;
exports.show = show;
Далее нам нужно завершить второй шаг. Мы начнем с Server.js - удалили обработку PostData и request.SetEncoding (эта часть образованной узла будет обрабатывать его сами), а вместо этого передаваем объект запроса по маршруту запроса:
Кода -копия выглядит следующим образом:
var http = require ("http");
var url = require ("url");
Function Start (маршрут, ручка) {
функция OnRequest (запрос, ответ) {
var pathname = url.parse (request.url) .pathname;
console.log ("запрос на" + pathname + "получен.");
маршрут (ручка, путь, ответ, запрос);
}
http.createserver (onrequest) .listen (8888);
console.log («Сервер начался»);
}
exports.start = start;
Далее, измените router.js, и на этот раз вам нужно передать объект запроса:
Кода -копия выглядит следующим образом:
маршрут функции (ручка, pathname, ответ, запрос) {
console.log ("ate to Mraking запрос на" + pathname);
if (typeof handle [pathname] === 'function') {
обрабатывать [pathname] (ответ, запрос);
} еще {
console.log («Обработчик запроса не найден для» + pathname);
response.writehead (404, {"Content-type": "text/html"});
response.write («404 не найден»);
response.end ();
}
}
exports.route = route;
Теперь объект запроса может использоваться в нашем обработчике запроса на загрузку. Узел-форма, обрабатывающий сохранение загруженного файла в каталог Local /TMP, и нам нужно
Что вы хотите сделать, так это убедиться, что файл сохраняется как /tmp/test.png.
Далее мы собрали операции загрузки и переименования обработки, как показано в requestHandlers.js:
Кода -копия выглядит следующим образом:
var QueryString = require ("queryString"),
fs = require ("fs"),
Commudable = require ("Commidable");
Функция запуска (ответ) {
console.log ("запрос обработчика" был вызван.
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" content = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" ectype = "multipart/form-data"'+
'method = "post">'+
'<input type = "file" name = "upload" multy = "multy">'+
'<input type = "Opper" value = "upload file" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, {"content-type": "text/html"});
response.write (тело);
response.end ();
}
Загрузка функции (ответ, запрос) {
console.log («обработчик запроса» был вызван загрузкой '. »);
var form = new Formidable.indomingForm ();
console.log ("ate to Sackse");
form.parse (запрос, функция (ошибка, поля, файлы) {
console.log («Подбор времени»);
fs.renamesync (files.upload.path, "/tmp/test.png");
response.writehead (200, {"content-type": "text/html"});
response.write («Полученное изображение: <br/>»);
response.write ("<img src = ' /show' />");
response.end ();
});
}
функция Show (ответ) {
Console.log («Показатель запроса» был вызван. »);
fs.readfile ("/tmp/test.png", "Binary", function (ошибка, файл) {
if (ошибка) {
response.writehead (500, {"контент-тип": "text/plain"});
response.write (error + "/n");
response.end ();
} еще {
response.writehead (200, {"контент-тип": "Image/png"});
response.write (файл, «двоичный»);
response.end ();
}
});
}
exports.start = start;
exports.upload = upload;
exports.show = show;
Делая это, наши серверы завершены.
В процессе загрузки изображений некоторые люди могут столкнуться с такими проблемами:
Я предполагаю, что причина этой проблемы вызвана дисковым разделом. Чтобы решить эту проблему, вам необходимо изменить путь папки с нулевым временем по умолчанию, чтобы убедиться, что она находится в том же разделе диска, что и целевой каталог.
Мы нашли функцию загрузки requestHandlers.js и внесли некоторые изменения в нее:
Кода -копия выглядит следующим образом:
Загрузка функции (ответ, запрос) {
console.log («обработчик запроса» был вызван загрузкой '. »);
var form = new Formidable.indomingForm ();
console.log ("ate to Sackse");
form.uploaddir = "tmp";
form.parse (запрос, функция (ошибка, поля, файлы) {
console.log («Подбор времени»);
fs.renamesync (files.upload.path, "/tmp/test.png");
response.writehead (200, {"content-type": "text/html"});
response.write («Полученное изображение: <br/>»);
response.write ("<img src = ' /show' />");
response.end ();
});
}
Мы добавили форму предложения. Uploaddir = "tmp". Теперь перезапустите сервер, а затем выполните операцию загрузки. Проблема прекрасно решена.