Nesta seção, implementaremos o usuário carregando a imagem e exibiremos a imagem no navegador.
O módulo externo que queremos usar aqui é o módulo formado por nó desenvolvido por Felix Geisendörfer. Faz uma boa abstração de analisar os dados do arquivo carregado.
Para instalar este módulo externo, você precisa executar o comando em CMD:
A cópia do código é a seguinte:
NPM Instale formidável
Se você produzir informações semelhantes, significa que a instalação foi bem -sucedida:
A cópia do código é a seguinte:
NPM Info Build Success: [email protected]
Depois que a instalação for bem -sucedida, podemos usar a solicitação para introduzi -la:
A cópia do código é a seguinte:
var formidable = requer ("formidável");
O que este módulo faz aqui é resolver o formulário enviado por meio de solicitação de postagem HTTP no Node.js. Tudo o que precisamos fazer é criar uma nova forma de entrada, que é uma representação abstrata do formulário enviado. Depois disso, podemos usá -lo para analisar o objeto de solicitação e obter os campos de dados necessários no formulário.
Os arquivos de imagem neste caso são armazenados na pasta /tmp.
Vamos primeiro resolver um problema: como podemos exibir arquivos salvos no disco rígido local no navegador?
Usamos o módulo FS para ler o arquivo no servidor.
Vamos adicionar o manipulador de solicitações /Showurl, que codifica o arquivo de arquivo /tmp/test.png ao navegador. Obviamente, você precisa salvar a imagem nesse local primeiro.
Nossa equipe requestHandlers.js faz algumas modificações:
A cópia do código é a seguinte:
VAR querystring = requer ("Querystring"),
fs = requer ("fs");
Função Iniciar (Resposta, PostData) {
console.log ("Solicitação Handler 'Start' foi chamado.");
var corpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'Content = "Texto /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form ação = "/upload" método = "post">'+
'<textário name = "text" linhas = "20" cols = "60"> </sexttarea>'+
'<input type = "submite" value = "enviar texto" />'+
'</morm>'+
'</body>'+
'</html>';
Response.writehead (200, {"content-type": "text/html"});
resposta.write (corpo);
resposta.END ();
}
Função Upload (resposta, pós -dados) {
console.log ("O manipulador de solicitação 'upload' foi chamado.");
Response.writehead (200, {"content-type": "text/plana"});
Response.Write ("Você enviou o texto:"+ querystring.parse (pós -dados) .text);
resposta.END ();
}
Função mostra (resposta, pós -dados) {
console.log ("request Handler 'show' foi chamado.");
fs.readfile ("/tmp/test.png", "binário", função (erro, arquivo) {
if (erro) {
Response.WriteHead (500, {"content-type": "text/plana"});
Response.Write (erro + "/n");
resposta.END ();
} outro {
Response.writehead (200, {"content-type": "Image/png"});
resposta.write (arquivo, "binário");
resposta.END ();
}
});
}
exports.start = start;
exports.upload = upload;
exports.show = show;
Também precisamos adicionar este novo manipulador de solicitação à tabela de mapas de rota em index.js:
A cópia do código é a seguinte:
var server = requer ("./ servidor");
var roteter = requer ("./ roteador");
var requestHandlers = requer ("./ requestHandlers");
var handle = {}
Handle ["/"] = requestHandlers.start;
manipular ["/start"] = requestHandlers.start;
Handle ["/upload"] = requestHandlers.upload;
manipular ["/show"] = requestHandlers.show;
server.start (roteter.route, handle);
Depois de reiniciar o servidor, visitando http: // localhost: 8888/show, você pode ver a imagem salva em /tmp/test.png.
Ok, no final, queremos:
Adicione um elemento de upload de arquivo no formulário /Iniciar
Integre a formação de nó em nosso manipulador de solicitação de upload para salvar imagens carregadas para /tmp/test.png
Incorporar a imagem carregada na saída HTML de /uPLOPLURL
O primeiro item é simples. Basta adicionar um tipo de codificação multipart/formulário no formulário HTML, remover a área de texto anterior, adicionar um componente de upload de arquivo e alterar a cópia do botão Enviar para "Upload File". Conforme mostrado no requestHandler.js da seguinte forma:
A cópia do código é a seguinte:
VAR querystring = requer ("Querystring"),
fs = requer ("fs");
Função Iniciar (Resposta, PostData) {
console.log ("Solicitação Handler 'Start' foi chamado.");
var corpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'Content = "Texto /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<Form Action = "/Upload" ENCTYPE = "Multipart/Form-Data"'+
'Method = "Post">'+
'<input type = "file" name = "upload">'+
'<input type = "submit" value = "upload file" />'+
'</morm>'+
'</body>'+
'</html>';
Response.writehead (200, {"content-type": "text/html"});
resposta.write (corpo);
resposta.END ();
}
Função Upload (resposta, pós -dados) {
console.log ("O manipulador de solicitação 'upload' foi chamado.");
Response.writehead (200, {"content-type": "text/plana"});
Response.Write ("Você enviou o texto:"+ querystring.parse (pós -dados) .text);
resposta.END ();
}
Função mostra (resposta, pós -dados) {
console.log ("request Handler 'show' foi chamado.");
fs.readfile ("/tmp/test.png", "binário", função (erro, arquivo) {
if (erro) {
Response.WriteHead (500, {"content-type": "text/plana"});
Response.Write (erro + "/n");
resposta.END ();
} outro {
Response.writehead (200, {"content-type": "Image/png"});
resposta.write (arquivo, "binário");
resposta.END ();
}
});
}
exports.start = start;
exports.upload = upload;
exports.show = show;
Em seguida, precisamos concluir a segunda etapa. Começamos com o Server.js - Remova o processamento de pós -dados e request.setEncoding (esta parte do Node -formidável o lidará) e, em vez disso, passará o objeto de solicitação para a rota de solicitação:
A cópia do código é a seguinte:
var http = requer ("http");
var url = requer ("url");
Função Iniciar (Rota, Handle) {
função onRequest (solicitação, resposta) {
var pathname = url.parse (request.url) .pathname;
console.log ("Solicitação de" + Pathname + "Recebido.");
rota (alça, nome do caminho, resposta, solicitação);
}
http.createServer (onRequest) .Listen (8888);
console.log ("O servidor começou");
}
exports.start = start;
Em seguida, modifique o Router.js, e desta vez você precisa passar no objeto de solicitação:
A cópia do código é a seguinte:
Rota da função (identificador, nome do caminho, resposta, solicitação) {
console.log ("prestes a rotear uma solicitação de" + pathname);
if (typeof handle [pathname] === 'function') {
Handle [Pathname] (resposta, solicitação);
} outro {
console.log ("Nenhum manipulador de solicitação encontrado para" + pathname);
Response.WriteHead (404, {"content-type": "text/html"});
resposta.write ("404 não encontrado");
resposta.END ();
}
}
exports.Route = rota;
Agora, o objeto de solicitação pode ser usado em nosso manipulador de solicitação de upload. A formidável de nó lidará com a economia do arquivo carregado no diretório local /TMP, e precisamos
O que você deseja fazer é garantir que o arquivo seja salvo como /tmp/test.png.
Em seguida, reunimos as operações de processamento de upload e renomeação de arquivos, conforme mostrado no requestHandlers.js:
A cópia do código é a seguinte:
VAR querystring = requer ("Querystring"),
fs = requer ("fs"),
formidável = requer ("formidável");
função start (resposta) {
console.log ("Solicitação Handler 'Start' foi chamado.");
var corpo = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" content = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<Form Action = "/Upload" ENCTYPE = "Multipart/Form-Data"'+
'Method = "Post">'+
'<input type = "file" name = "upload" múltiplo = "múltiplo">'+
'<input type = "submit" value = "upload file" />'+
'</morm>'+
'</body>'+
'</html>';
Response.writehead (200, {"content-type": "text/html"});
resposta.write (corpo);
resposta.END ();
}
Função Upload (resposta, solicitação) {
console.log ("O manipulador de solicitação 'upload' foi chamado.");
var form = new formidable.incomingForm ();
console.log ("prestes a analisar");
form.parse (solicitação, função (erro, campos, arquivos) {
console.log ("Parsing feito");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.writehead (200, {"content-type": "text/html"});
Response.Write ("Imagem recebida: <br/>");
Response.Write ("<img src = ' /show' />");
resposta.END ();
});
}
Função mostra (resposta) {
console.log ("request Handler 'show' foi chamado.");
fs.readfile ("/tmp/test.png", "binário", função (erro, arquivo) {
if (erro) {
Response.WriteHead (500, {"content-type": "text/plana"});
Response.Write (erro + "/n");
resposta.END ();
} outro {
Response.writehead (200, {"content-type": "Image/png"});
resposta.write (arquivo, "binário");
resposta.END ();
}
});
}
exports.start = start;
exports.upload = upload;
exports.show = show;
Ao fazer isso, nossos servidores estão todos concluídos.
Durante o processo de fazer upload de imagens, algumas pessoas podem encontrar esses problemas:
Eu acho que o motivo desse problema é causado pela partição do disco. Para resolver esse problema, você precisa alterar o caminho padrão do Formidable Formidable para garantir que ele esteja na mesma partição de disco que o diretório de destino.
Encontramos a função de upload do requestHandlers.js e fizemos algumas modificações:
A cópia do código é a seguinte:
Função Upload (resposta, solicitação) {
console.log ("O manipulador de solicitação 'upload' foi chamado.");
var form = new formidable.incomingForm ();
console.log ("prestes a analisar");
form.uploaddir = "tmp";
form.parse (solicitação, função (erro, campos, arquivos) {
console.log ("Parsing feito");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.writehead (200, {"content-type": "text/html"});
Response.Write ("Imagem recebida: <br/>");
Response.Write ("<img src = ' /show' />");
resposta.END ();
});
}
Adicionamos um formulário de frase.UPLOADDIR = "TMP". Agora reinicie o servidor e execute a operação de upload. O problema está perfeitamente resolvido.