이 섹션에서는 이미지를 업로드하고 브라우저에 이미지를 표시하는 사용자를 구현합니다.
여기서 사용하려는 외부 모듈은 Felix Geisendörfer가 개발 한 노드 형식 모듈입니다. 업로드 된 파일 데이터를 구문 분석하는 것이 좋습니다.
이 외부 모듈을 설치하려면 CMD에서 명령을 실행해야합니다.
코드 사본은 다음과 같습니다.
NPM 설치
유사한 정보를 출력하면 설치가 성공했음을 의미합니다.
코드 사본은 다음과 같습니다.
NPM 정보 빌드 성공 : [email protected]
설치가 성공하면 요청을 사용하여 소개 할 수 있습니다.
코드 사본은 다음과 같습니다.
var commidable = require ( "commidable");
이 모듈은 Node.js의 HTTP Post 요청을 통해 제출 된 양식을 해결하는 것입니다. 우리가해야 할 일은 제출 된 양식의 추상적 인 표현 인 새로운 incomingform을 만드는 것입니다. 그런 다음이를 사용하여 요청 객체를 구문 분석하고 필요한 데이터 필드를 양식에 가져올 수 있습니다.
이 경우 이미지 파일은 /TMP 폴더에 저장됩니다.
먼저 문제를 해결합시다 : 브라우저의 로컬 하드 드라이브에 저장된 파일을 어떻게 표시 할 수 있습니까?
FS 모듈을 사용하여 파일을 서버에 읽습니다.
/tmp/test.png 컨텐츠를 브라우저에 하드 코딩하는 /showurl 요청 핸들러를 추가하겠습니다. 물론 이미지를이 위치에 저장해야합니다.
우리 팀의 요청 핸들러.js는 몇 가지 수정을합니다.
코드 사본은 다음과 같습니다.
var querystring = require ( "QueryString"),
fs = 요구 ( "fs");
함수 시작 (응답, 사후 데이터) {
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"rows = "20"cols = "60"> </textArea>'+
'<input type = "제출"value = "텍스트 제출" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
response.writehead (200, { "content-type": "text/plain"});
response.write ( "텍스트를 보냈습니다 :"+ querystring.parse (postData) .Text);
응답 ();
}
함수 쇼 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '쇼'가 호출되었습니다.");
fs.readfile ( "/tmp/test.png", "binary", function (error, file) {
if (오류) {
response.writehead (500, { "Content-Type": "Text/Plain"});
응답 (오류 + "/n");
응답 ();
} 또 다른 {
response.writehead (200, { "content-type": "image/png"});
response.write (파일, "바이너리");
응답 ();
}
});
}
Exports.start = 시작;
Exports.upload = 업로드;
Exports.show = show;
또한이 새 요청 핸들러를 Index.js의 Route Map 테이블에 추가해야합니다.
코드 사본은 다음과 같습니다.
var server = require ( "./ server");
var router = require ( "./ router");
var requestHandlers = require ( "./ requestHandlers");
var 핸들 = {}
핸들 [ "/"] = requestHandlers.start;
[ "/start"] = requestHandlers.Start를 처리합니다.
[ "/upload"] = requestHandlers.Upload를 처리합니다.
[ "/show"] = requestHandlers.show를 처리합니다.
server.start (router.route, handle);
서버를 다시 시작한 후 http : // localhost : 8888/show를 방문하여 /tmp/test.png에 저장된 사진을 볼 수 있습니다.
좋아, 결국 우리는 원한다 :
/시작 양식에서 파일 업로드 요소 추가
업로드 요청 처리기에 노드 형식을 통합하여 업로드 된 이미지를 /tmp/test.png에 저장합니다.
업로드 된 이미지를 /uploadUrl에서 HTML 출력에 포함
첫 번째 항목은 간단합니다. HTML 양식에 멀티 파트/양식 데이터 인코딩 유형을 추가하고 이전 텍스트 영역을 제거하고 파일 업로드 구성 요소를 추가 한 다음 제출 버튼의 사본을 "파일 업로드"로 변경하십시오. 다음과 같이 requesthandler.js에 표시된대로.
코드 사본은 다음과 같습니다.
var querystring = require ( "QueryString"),
fs = 요구 ( "fs");
함수 시작 (응답, 사후 데이터) {
Console.log ( "요청 핸들러 '시작'이 호출되었습니다.");
var body = '<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">'+
'<input type = "제출"value = "파일 업로드" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
response.writehead (200, { "content-type": "text/plain"});
response.write ( "텍스트를 보냈습니다 :"+ querystring.parse (postData) .Text);
응답 ();
}
함수 쇼 (응답, 사후 데이터) {
Console.log ( "요청 처리기 '쇼'가 호출되었습니다.");
fs.readfile ( "/tmp/test.png", "binary", function (error, file) {
if (오류) {
response.writehead (500, { "Content-Type": "Text/Plain"});
응답 (오류 + "/n");
응답 ();
} 또 다른 {
response.writehead (200, { "content-type": "image/png"});
response.write (파일, "바이너리");
응답 ();
}
});
}
Exports.start = 시작;
Exports.upload = 업로드;
Exports.show = show;
다음으로 두 번째 단계를 완료해야합니다. 우리는 server.js로 시작합니다 - postdata 및 request.setencoding의 처리를 제거하고 (Node -Formidable 의이 부분은 자체를 처리 할 것입니다) 요청 객체를 요청 경로로 전달합니다.
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "http");
var url = require ( "url");
함수 시작 (경로, 핸들) {
onrequest (요청, 응답) {
var pathname = url.parse (request.url) .pathname;
console.log ( "" + pathname + "에 대한 요청");
경로 (핸들, PathName, 응답, 요청);
}
http.createserver (onrequest) .listen (8888);
Console.log ( "서버가 시작되었습니다.");
}
Exports.start = 시작;
다음으로 router.js를 수정하면 이번에는 요청 객체를 전달해야합니다.
코드 사본은 다음과 같습니다.
기능 경로 (핸들, PathName, 응답, 요청) {
Console.log ( "" + pathname에 대한 요청을 라우팅하려면);
if (typeof handle [pathname] === 'function') {
핸들 [pathname] (응답, 요청);
} 또 다른 {
console.log ( "" + pathname에 대한 요청 핸들러 없음);
response.writehead (404, { "Content-Type": "Text/Html"});
response.write ( "404 찾을 수 없음");
응답 ();
}
}
Exports.route = 경로;
이제 요청 객체를 업로드 요청 핸들러에서 사용할 수 있습니다. Node-Formidable은 업로드 된 파일을 로컬 /TMP 디렉토리에 저장하고 필요합니다.
당신이하고 싶은 것은 파일이 /tmp/test.png로 저장되는지 확인하는 것입니다.
다음으로 요청 핸들러에 표시된대로 파일 업로드 및 이름 변경 작업을 구성했습니다.
코드 사본은 다음과 같습니다.
var querystring = require ( "QueryString"),
fs = require ( "fs"),
강력한 = 요구 사항 ( "포괄적");
함수 시작 (응답) {
Console.log ( "요청 핸들러 '시작'이 호출되었습니다.");
var body = '<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"multure = "multiple">'+
'<input type = "제출"value = "파일 업로드" />'+
'</form>'+
'</body>'+
'</html>';
response.writehead (200, { "content-type": "text/html"});
응답. 쓰기 (신체);
응답 ();
}
함수 업로드 (응답, 요청) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
var form = new commidable.incomingform ();
Console.log ( "구문 분석하려면");
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' />");
응답 ();
});
}
기능 쇼 (응답) {
Console.log ( "요청 처리기 '쇼'가 호출되었습니다.");
fs.readfile ( "/tmp/test.png", "binary", function (error, file) {
if (오류) {
response.writehead (500, { "Content-Type": "Text/Plain"});
응답 (오류 + "/n");
응답 ();
} 또 다른 {
response.writehead (200, { "content-type": "image/png"});
response.write (파일, "바이너리");
응답 ();
}
});
}
Exports.start = 시작;
Exports.upload = 업로드;
Exports.show = show;
이렇게하면 서버가 모두 완료되었습니다.
이미지를 업로드하는 과정에서 일부 사람들은 그러한 문제에 직면 할 수 있습니다.
이 문제의 이유는 디스크 파티션으로 인한 것 같습니다. 이 문제를 해결하려면 대상 디렉토리와 동일한 디스크 파티션에 있는지 확인하기 위해 Comidable의 기본 제로 타임 폴더 경로를 변경해야합니다.
우리는 requestHandlers.js의 업로드 기능을 찾았고 몇 가지 수정을했습니다.
코드 사본은 다음과 같습니다.
함수 업로드 (응답, 요청) {
Console.log ( "요청 처리기 '업로드'가 호출되었습니다.");
var form = new commidable.incomingform ();
Console.log ( "구문 분석하려면");
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' />");
응답 ();
});
}
문장 양식을 추가했습니다 .uploaddir = "tmp". 이제 서버를 다시 시작한 다음 업로드 작업을 수행하십시오. 문제는 완벽하게 해결되었습니다.