En esta sección, implementaremos el usuario cargando la imagen y mostraremos la imagen en el navegador.
El módulo externo que queremos usar aquí es el módulo formidable de nodo desarrollado por Felix Geisendörfer. Hace una buena abstracción de los datos de archivos cargados de análisis.
Para instalar este módulo externo, debe ejecutar el comando en cmd:
La copia del código es la siguiente:
NPM Instalar formidable
Si genera información similar, significa que la instalación ha sido exitosa:
La copia del código es la siguiente:
NPM Info Build Build éxito: [email protected]
Después de que la instalación sea exitosa, podemos usar la solicitud para presentarla:
La copia del código es la siguiente:
var formidable = request ("formidable");
Lo que este módulo hace aquí es resolver el formulario enviado a través de la solicitud de publicación HTTP en Node.js. Todo lo que tenemos que hacer es crear una nueva forma entrante, que es una representación abstracta del formulario enviado. Después de eso, podemos usarlo para analizar el objeto de solicitud y obtener los campos de datos requeridos en el formulario.
Los archivos de imagen en este caso se almacenan en la carpeta /TMP.
Primero resolvamos un problema: ¿Cómo podemos mostrar archivos guardados en el disco duro local en el navegador?
Usamos el módulo FS para leer el archivo al servidor.
Agregamos el controlador de solicitudes /showurl, que codifica el contenido del archivo /tmp/test.png al navegador. Por supuesto, primero debe guardar la imagen en esta ubicación.
Nuestro equipo SolicHandlers.js hace algunas modificaciones:
La copia del código es la siguiente:
var QueryString = require ("QueryString"),
fs = requerir ("fs");
Function Start (Respuesta, PostData) {
console.log (se llamó al controlador de solicitud 'Inicio'. ");
var cuerpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<Form Action = "/upload" Method = "Post">'+
'<Textarea name = "Text" Rows = "20" cols = "60"> </extarea>'+
'<input type = "enviar" valor = "enviar texto" />'+
'</form>'+
'</body>'+
'</html>';
Response.Writehead (200, {"Content-type": "Text/html"});
respuesta.write (cuerpo);
respuesta.end ();
}
Function upload (respuesta, postdata) {
console.log ("Solicitar el controlador 'Subiendo' se llamó.");
Response.Writehead (200, {"Content-type": "Text/Plain"});
Response.write ("Has enviado el texto:"+ QueryString.Parse (postdata) .Text);
respuesta.end ();
}
show de función (respuesta, postdata) {
console.log (se llamó "Show 'Show'" Show '. ");
fs.ReadFile ("/tmp/test.png", "binario", función (error, archivo) {
if (error) {
Response.Writehead (500, {"Content-type": "Text/Plain"});
respuesta.write (error + "/n");
respuesta.end ();
} demás {
Response.Writehead (200, {"Content-type": "Image/png"});
Response.write (archivo, "binario");
respuesta.end ();
}
});
}
exports.start = inicio;
exports.upload = cargar;
exports.show = show;
También debemos agregar este nuevo controlador de solicitud a la tabla del mapa de ruta en index.js:
La copia del código es la siguiente:
var ser servidor = requirir ("./ servidor");
var enrutador = require ("./ Router");
var requestHandlers = require ("./ requestHandlers");
var handy = {}
manejar ["/"] = requestHandlers.Start;
manejar ["/inicio"] = requestHandlers.start;
manejar ["/upload"] = requestHandlers.upload;
manejar ["/show"] = requestHandlers.show;
servidor.Start (Router.route, Handle);
Después de reiniciar el servidor, visitando http: // localhost: 8888/show, puede ver la imagen guardada en /tmp/test.png.
Ok, al final queremos:
Agregue un elemento de carga de archivo en el formulario /inicio
Integre el nodo formidable en nuestro controlador de solicitud de carga para guardar imágenes cargadas en /tmp/test.png
Incrustar la imagen cargada en la salida HTML de /uploadUrl
El primer elemento es simple. Simplemente agregue un tipo de codificación multipart/formulario en el formulario HTML, elimine el área de texto anterior, agregue un componente de carga de archivo y cambie la copia del botón Enviar a "cargar archivo". Como se muestra en requesthandler.js de la siguiente manera:
La copia del código es la siguiente:
var QueryString = require ("QueryString"),
fs = requerir ("fs");
Function Start (Respuesta, PostData) {
console.log (se llamó al controlador de solicitud 'Inicio'. ");
var cuerpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<Form Action = "/upload" enctype = "multipart/form-data"'+
'método = "post">'+
'<input type = "file" name = "upload">'+
'<input type = "enviar" valor = "archivo de carga" />'+
'</form>'+
'</body>'+
'</html>';
Response.Writehead (200, {"Content-type": "Text/html"});
respuesta.write (cuerpo);
respuesta.end ();
}
Function upload (respuesta, postdata) {
console.log ("Solicitar el controlador 'Subiendo' se llamó.");
Response.Writehead (200, {"Content-type": "Text/Plain"});
Response.write ("Has enviado el texto:"+ QueryString.Parse (postdata) .Text);
respuesta.end ();
}
show de función (respuesta, postdata) {
console.log (se llamó "Show 'Show'" Show '. ");
fs.ReadFile ("/tmp/test.png", "binario", función (error, archivo) {
if (error) {
Response.Writehead (500, {"Content-type": "Text/Plain"});
respuesta.write (error + "/n");
respuesta.end ();
} demás {
Response.Writehead (200, {"Content-type": "Image/png"});
Response.write (archivo, "binario");
respuesta.end ();
}
});
}
exports.start = inicio;
exports.upload = cargar;
exports.show = show;
A continuación, necesitamos completar el segundo paso. Comenzamos con Server.js: elimine el procesamiento de PostData y Solic.SetEncoding (esta parte de Node -formidable lo manejará en sí mismo) y, en su lugar, pasará el objeto de solicitud a la ruta de solicitud:
La copia del código es la siguiente:
var http = require ("http");
var url = require ("url");
Function Start (Route, Handle) {
function OnRequest (solicitud, respuesta) {
var rathName = url.Parse (request.url) .pathname;
console.log ("Solicitar" + PathName + "Recibido");
ruta (manejo, ruta, nombre, respuesta, solicitud);
}
http.createServer (OnRequest) .listen (8888);
console.log ("El servidor ha comenzado");
}
exports.start = inicio;
A continuación, modifique Router.js, y esta vez debe aprobar el objeto de solicitud:
La copia del código es la siguiente:
ruta de funciones (identificador, ruta, nombre, respuesta, solicitud) {
console.log ("a punto de enrutar una solicitud para" + rathName);
if (typeof mango [pathname] === 'function') {
manejar [PathName] (respuesta, solicitud);
} demás {
console.log ("No se encontró controlador de solicitud para" + PathName);
Response.Writehead (404, {"Content-type": "text/html"});
respuesta.write ("404 no encontrado");
respuesta.end ();
}
}
exports.route = ruta;
Ahora, el objeto de solicitud se puede usar en nuestro controlador de solicitud de carga. Node-formidable se encargará de guardar el archivo cargado en el directorio local /TMP, y necesitamos
Lo que desea hacer es asegurarse de que el archivo se guarde como /tmp/test.png.
A continuación, organizamos las operaciones de procesamiento de la carga y el cambio de nombre de archivos, como se muestra en SoldHandlers.js:
La copia del código es la siguiente:
var QueryString = require ("QueryString"),
fs = requerir ("fs"),
formidable = require ("formidable");
Function Start (Respuesta) {
console.log (se llamó al controlador de solicitud 'Inicio'. ");
var cuerpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" content = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<Form Action = "/upload" enctype = "multipart/form-data"'+
'método = "post">'+
'<input type = "file" name = "upload" múltiple = "múltiple">'+
'<input type = "enviar" valor = "archivo de carga" />'+
'</form>'+
'</body>'+
'</html>';
Response.Writehead (200, {"Content-type": "Text/html"});
respuesta.write (cuerpo);
respuesta.end ();
}
Function upload (respuesta, solicitud) {
console.log ("Solicitar el controlador 'Subiendo' se llamó.");
var Form = new Formidable.InComingForm ();
console.log ("a punto de analizar");
Form.Parse (solicitud, función (error, campos, archivos) {
console.log ("analizador hecho");
fs.Renamesync (files.upload.path, "/tmp/test.png");
Response.Writehead (200, {"Content-type": "Text/html"});
respuesta.write ("Imagen recibida: <br/>");
respuesta.write ("<img src = ' /show' />");
respuesta.end ();
});
}
Función Show (Respuesta) {
console.log (se llamó "Show 'Show'" Show '. ");
fs.ReadFile ("/tmp/test.png", "binario", función (error, archivo) {
if (error) {
Response.Writehead (500, {"Content-type": "Text/Plain"});
respuesta.write (error + "/n");
respuesta.end ();
} demás {
Response.Writehead (200, {"Content-type": "Image/png"});
Response.write (archivo, "binario");
respuesta.end ();
}
});
}
exports.start = inicio;
exports.upload = cargar;
exports.show = show;
Al hacer esto, nuestros servidores están completados.
Durante el proceso de carga de imágenes, algunas personas pueden encontrar tales problemas:
Supongo que la razón de este problema es causada por la partición del disco. Para resolver este problema, debe cambiar la ruta de carpeta de tiempo cero predeterminada de formidable para asegurarse de que esté en la misma partición de disco que el directorio de destino.
Encontramos la función de carga de requesthandlers.js e hicimos algunas modificaciones:
La copia del código es la siguiente:
Function upload (respuesta, solicitud) {
console.log ("Solicitar el controlador 'Subiendo' se llamó.");
var Form = new Formidable.InComingForm ();
console.log ("a punto de analizar");
form.uploaddir = "tmp";
Form.Parse (solicitud, función (error, campos, archivos) {
console.log ("analizador hecho");
fs.Renamesync (files.upload.path, "/tmp/test.png");
Response.Writehead (200, {"Content-type": "Text/html"});
respuesta.write ("Imagen recibida: <br/>");
respuesta.write ("<img src = ' /show' />");
respuesta.end ();
});
}
Agregamos una oración form.uploaddir = "tmp". Ahora reinicie el servidor y luego realice la operación de carga. El problema está perfectamente resuelto.