Node.js는 파일 업로드를 구현합니다.

저는 직장에서 그런 요구에 직면했습니다. 파일을 업로드하려면 nodejs를 사용해야 했습니다. 이전에는 브라우저를 통해 파일을 업로드하는 방법만 알고 있었습니다. Google에서 검색한 결과 브라우저가 서버에 데이터를 전송하기 위해 http 프로토콜을 사용한다는 것을 깨달았습니다. 구체적인 프로토콜은 "RFC 1867 - HTML의 양식 기반 파일 업로드"입니다. 브라우저 프로토콜을 사용하면 먼저 브라우저가 서버로 보내는 데이터를 확인한 다음 동일한 방식으로 업로드 기능을 구현할 수 있습니다. 양식 업로드 파일에 대해 말하면 모든 사람이 이에 대해 잘 알고 있어야 합니다.

<form action="http://www.qq.com/" method="post">
<input type="text" name="text1" /><br />
<input type="text" name="text2" /><br />
<input type="submit" />
</form>

다음과 같이 데이터를 보냅니다.

POST http://www.qq.com/ HTTP/1.1

호스트: www.qq.com

콘텐츠 길이: 23
콘텐츠 유형: application/x-www-form-urlencoded; charset=UTF-8

text1=hello&text2= world

Content-Type의 기본값은 application/x-www-form-urlencoded이므로 메시지가 URL로 인코딩된다는 점은 주목할 가치가 있습니다. 예를 들어 "Hello"는 %E4%BD%A0%E5%A5%BD로 인코딩됩니다.

다음으로 양식을 통한 업로드 방법을 살펴보겠습니다. 누구나 다음 내용을 잘 알고 있어야 합니다.

<form action="http://www.qq.com" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" />
<input type="submit" value="submit" />
</form>

그런 다음 hello world라는 단어만 포함하는 새로운 upload.txt 텍스트 파일을 만들고 업로드합니다. 우리는 그것을 사용할 것입니다. Fiddler를 사용하여 패키지를 캡처하면 전송된 데이터가 조금 더 복잡하다는 것을 알 수 있습니다(캐시 제어 및 쿠키와 같이 관련 없는 요청 라인이 많이 제거되었습니다).

POST http: //www.qq.com/ HTTP/1.1

호스트: www.qq.com

콘텐츠 길이: 199
콘텐츠 유형: multipart/form-databoundary= ----WebKitFormBoundarywr3X7sXBYQQ4ZF5G

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G
콘텐츠 처리: form-data; name="myfile"
콘텐츠 유형: 텍스트 /plain

hello world

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G--

RFC 1867의 정의에 따라 경계 데이터 조각을 생성해야 합니다. 데이터는 콘텐츠의 다른 곳에 나타날 수 없습니다. 이는 브라우저마다 생성 알고리즘이 다를 수 있습니다. 위의 경계는 분리된 데이터가 생성된 후 콘텐츠에 배치될 수 있습니다. 헤더 유형으로 서버로 전송됩니다. 즉, 위의 Content-Type은 multipart/form-data; 경계=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G입니다. 또한 업로드된 콘텐츠는 구분된 데이터를 사용하여 여러 세그먼트로 분리되어야 합니다. 데이터 세그먼트에는 파일 이름이 포함됩니다. 서버는 이 이름을 사용하여 파일을 수신하며, 이 예에서는 업로드된 파일 형식입니다. png 이미지는 image/png입니다. 파일 형식 뒤의 빈 줄은 업로드된 파일의 내용입니다. 이 예에서는 이해를 돕기 위해 텍스트 파일을 업로드했기 때문에 이미지 파일을 업로드하면 내용이 바로 표시될 수 있습니다. 바이너리 파일입니다. fiddler는 잘못된 문자를 표시합니다. 파일 내용이 끝나면 빈 줄과 경계 데이터가 있습니다.

보내는 형식을 자세히 이해한 후 다음 단계는 nodejs를 사용하여 프로그래밍을 구현하는 것입니다. 간단히 말하면 형식에 따라 데이터를 서버에 보내는 것입니다.

const http = require('http');
const fs = require('fs');
//post地址为本地服务的一个php，用于测试上传是否成功
var options = {
hostname: 'localhost',
port: 80,
path: '/get.php',
method: 'POST'
}
//生成分隔数据
var boundaryKey = '----WebKitFormBoundaryjLVkbqXtIi0YGpaB';
//读取需要上传的文件内容
fs.readFile('./upload.txt', function (err, data) {
//拼装分隔数据段
var payload = '--' + boundaryKey + '\r\n' + 'Content-Disposition:form-data; name="myfile"; filename="upload.txt"\r\n' + 'Content-Type:text/plain\r\n\r\n';
payload += data;
payload += '\r\n--' + boundaryKey + '--';
//发送请求
var req = http.request(options, function (res) {
res.setEncoding('utf8');
res.on('data', function (chunk) {
console.log('body:' + chunk);
});
});
req.on('error', function(e) {
console.error("error:"+e);
});
//把boundary、要发送的数据大小以及数据本身写进请求
req.setHeader('Content-Type', 'multipart/form-data; boundary='+boundaryKey+'');
req.setHeader('Content-Length', Buffer.byteLength(payload, 'utf8'));
req.write(payload);
req.end();
});

이 글의 초점은 프로토콜을 이해하고 이를 코드로 구현하는 것입니다. 코드 구성에는 많은 최적화가 있습니다.

마지막으로 로컬 아파치에서 테스트를 위해 업로드된 파일을 저장하는 PHP를 작성합니다.

<?php
$filePath = &#39;./upload.txt&#39;;
move_uploaded_file($_FILES[&#39;myfile&#39;][&#39;tmp_name&#39;] , $filePath);
echo "ok";
?>

또한 RFC 1867에 따르면 한 번에 여러 파일을 업로드하는 기능도 구현될 수 있습니다. 이에 대해서는 여기서 자세히 설명하지 않습니다. 자세한 내용은 RFC 1867을 참조하세요.

위는 편집자가 소개한 Node.js 파일 업로드 구현입니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 시간에 당신에게. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

Node.js 파일 업로드 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!