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

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

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

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

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

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

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

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

' '' '' '양식>'
'본문>'
'';
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 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와 같이 파일 업로드 처리 및 이름 바꾸기 작업을 구성합니다.

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

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

");
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"라는 문장을 추가하고 이제 서버를 다시 시작한 다음 업로드 작업을 수행하면 문제가 완벽하게 해결되었습니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.