nodejs 서버를 쉽게 생성하세요. (10): 업로드된 이미지를 처리하세요_node.js

이 섹션에서는 사용자가 사진을 업로드하고 브라우저에 사진을 표시하는 것을 구현합니다.

여기서 사용할 외부 모듈은 Felix Geisendörfer가 개발한 node-formidable 모듈입니다. 업로드된 파일 데이터를 구문 분석하기 위한 좋은 추상화를 만듭니다.

이 외부 모듈을 설치하려면 cmd에서 다음 명령을 실행해야 합니다.

코드 복사 코드는 다음과 같습니다.

npm 설치는 만만치 않습니다

비슷한 정보가 출력되면 설치 성공입니다:

코드 복사 코드는 다음과 같습니다.

npm 정보 빌드 성공: formidable@1.0.14

설치가 성공적으로 완료되면 요청을 사용하여 소개할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var formidable = require(“형성 가능”);

여기서 이 모듈이 하는 일은 Node.js에서 구문 분석할 수 있는 HTTP POST 요청을 통해 제출된 양식을 변환하는 것입니다. 우리가 해야 할 일은 제출된 양식을 추상적으로 표현한 새로운 IncomingForm을 생성하는 것뿐입니다. 그런 다음 이를 사용하여 요청 개체를 구문 분석하고 양식에서 필요한 데이터 필드를 얻을 수 있습니다.

본 기사의 사례 이미지 파일은 /tmp 폴더에 저장되어 있습니다.

먼저 문제를 해결해 보겠습니다. 로컬 하드 드라이브에 저장된 파일을 브라우저에서 표시하는 방법은 무엇입니까?

fs 모듈을 사용하여 파일을 서버로 읽어옵니다.

/tmp/test.png 파일의 내용을 브라우저에 표시하도록 직접 하드 코딩된 /showURL에 대한 요청 핸들러를 추가해 보겠습니다. 물론 먼저 이미지를 이 위치에 저장해야 합니다.

저희 팀에서는 requestHandlers.js를 일부 수정할 예정입니다.

코드 복사 코드는 다음과 같습니다.

var querystring = require("querystring"),
fs = require("fs");
함수 시작(응답, postData) {
console.log("요청 핸들러 'start'가 호출되었습니다.");
var body = ''
'<머리>' ' 'content="text/html; charset=UTF-8" />'
'' '' '

' '' '' ''
''
'';
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();
}
함수 표시(응답, postData) {
console.log("요청 핸들러 'show'가 호출되었습니다.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(오류) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(오류 "n");
response.end();
} 그 밖의 {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(파일, "바이너리");
response.end();
}
});
}
수출.시작 = 시작;
수출.업로드 = 업로드;
내보내기.show = 표시;



또한 index.js의 경로 맵에 이 새 요청 핸들러를 추가해야 합니다.

코드 복사

코드는 다음과 같습니다.

var 서버 = 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, 핸들);

서버를 다시 시작한 후 http://localhost:8888/show에 접속하시면 /tmp/test.png에 저장된 이미지를 보실 수 있습니다.

자, 마지막으로 원하는 것은 다음과 같습니다.

 /start 양식에 파일 업로드 요소 추가

 업로드된 이미지를 /tmp/test.png에 저장하기 위해 node-formidable을 업로드 요청 처리기에 통합합니다

 업로드된 이미지를 /uploadURL을 통해 HTML 출력에 삽입합니다.

첫 번째 항목은 간단합니다. HTML 양식에 multipart/form-data 인코딩 유형을 추가하고, 이전 텍스트 영역을 제거하고, 파일 업로드 구성 요소를 추가하고, 제출 버튼 사본을 "파일 업로드"로 변경하세요. 아래 requestHandler.js에 표시된 대로:

코드 복사 코드는 다음과 같습니다.

var querystring = require("querystring"),
fs = require("fs");
함수 시작(응답, postData) {
console.log("요청 핸들러 'start'가 호출되었습니다.");
var body = ''
'<머리>' ' 'content="text/html; charset=UTF-8" />'
'' '' ' '메서드="게시물">
'' '' ''
''
'';
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();
}
함수 표시(응답, postData) {
console.log("요청 핸들러 'show'가 호출되었습니다.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(오류) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(오류 "n");
response.end();
} 그 밖의 {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(파일, "바이너리");
response.end();
}
});
}
수출.시작 = 시작;
수출.업로드 = 업로드;
내보내기.show = 표시;



다음으로 두 번째 단계를 완료해야 합니다. server.js부터 시작합니다. postData 및 request.setEncoding 처리를 제거하고(이 부분은 node-formidable이 자체적으로 처리함) 대신 요청 개체를 How to에 전달합니다. 라우팅 요청:

코드 복사

코드는 다음과 같습니다. var http = require("http"); var url = require("url"); 함수 시작(경로, 핸들) {

함수 onRequest(요청, 응답) {

var 경로명 = url.parse(request.url).pathname;
console.log("" pathname "에 대한 요청이 수신되었습니다.");
Route(핸들, 경로명, 응답, 요청);
}
http.createServer(onRequest).listen(8888);
console.log("서버가 시작되었습니다.");
}
수출.시작 = 시작;



다음으로 router.js를 수정하고 이번에는 요청 객체를 전달합니다.

코드 복사

코드는 다음과 같습니다.

함수 경로(핸들, 경로명, 응답, 요청) {
console.log("pathname에 대한 요청을 라우팅하려고 합니다.");
if (typeof 핸들[경로 이름] === '함수') {
핸들[경로명](응답, 요청);
} 그 밖의 {
console.log("경로명에 대한 요청 핸들러를 찾을 수 없습니다.");
response.writeHead(404, {"Content-Type": "text/html"});
response.write("404 찾을 수 없음");
response.end();
}
}
수출.경로 = 경로;

이제 업로드 요청 핸들러에서 요청 객체를 사용할 수 있습니다. node-formidable은 업로드된 파일을 로컬 /tmp 디렉토리에 저장하는 작업을 처리하며

해야 할 일은 파일이 /tmp/test.png로 저장되었는지 확인하는 것입니다.

다음으로 아래 requestHandlers.js와 같이 파일 업로드 처리 및 이름 바꾸기 작업을 구성합니다.

코드 복사 코드는 다음과 같습니다.

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("형성 가능");
함수 시작(응답) {
console.log("요청 핸들러 'start'가 호출되었습니다.");
var body = ''
'<머리>' ''
'' '' ' '메서드="게시물">
'' '' ''
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(본문);
response.end();
}
함수 업로드(응답, 요청) {
console.log("요청 핸들러 '업로드'가 호출되었습니다.");
var form = new formidable.IncomingForm();
console.log("파싱하려고 합니다");
form.parse(요청, 함수(오류, 필드, 파일) {
console.log("파싱 완료");
fs.renameSync(files.upload.path, "/tmp/test.png");
response.writeHead(200, {"Content-Type": "text/html"});
response.write("받은 이미지:
");
response.write("");
response.end();
});
}
함수 표시(응답) {
console.log("요청 핸들러 'show'가 호출되었습니다.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(오류) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(오류 "n");
response.end();
} 그 밖의 {
response.writeHead(200, {"Content-Type": "image/png"});
Response.write(파일, "바이너리");
response.end();
}
});
}
수출.시작 = 시작;
수출.업로드 = 업로드;
내보내기.show = 표시;



이렇게 하면 서버가 완성됩니다.

이미지 업로드 과정에서 다음과 같은 문제가 발생할 수 있습니다.

이 문제의 원인은 디스크 파티션 때문인 것 같습니다. 이 문제를 해결하려면 formidable의 기본 제로타임 폴더 경로를 변경하여 대상 디렉터리와 동일한 디스크 파티션에 있도록 해야 합니다.

requestHandlers.js의 업로드 기능을 찾아 몇 가지 수정합니다.

코드 복사

코드는 다음과 같습니다.

함수 업로드(응답, 요청) {
console.log("요청 핸들러 '업로드'가 호출되었습니다."); var form = new formidable.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("수신된 이미지:
"); response.write(""); 응답.끝()
})
}


form.uploadDir = "tmp"라는 문장을 추가하고 이제 서버를 다시 시작한 다음 업로드 작업을 수행하면 문제가 완벽하게 해결되었습니다.