Heim > Web-Frontend > js-Tutorial > Hauptteil

Node.js implementiert den Datei-Upload

高洛峰
Freigeben: 2016-12-24 17:23:20
Original
1547 Leute haben es durchsucht

Ich bin bei der Arbeit auf eine solche Nachfrage gestoßen, dass ich NodeJS zum Hochladen von Dateien verwenden musste. Bisher wusste ich, wie man Dateien über einen Browser hochlädt. Nach einiger Google-Suche wurde mir klar, dass der Browser lediglich das http-Protokoll verwendet, um Daten an den Server zu übertragen. Das spezifische Protokoll ist „RFC 1867 – Formularbasierter Datei-Upload in HTML“. Mit dem Browser-Protokoll können wir zunächst sehen, welche Daten der Browser an den Server sendet, und dann die Upload-Funktion auf die gleiche Weise implementieren. Apropos Formular-Upload-Dateien: Jeder sollte damit vertraut sein:

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

Senden Sie Daten wie folgt:


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

Host: www.qq.com

Inhaltslänge: 23
Inhaltstyp: application/x-www-form-urlencoded; world

Es ist erwähnenswert, dass Content-Type standardmäßig application/x-www-form-urlencoded ist, sodass die Nachricht URL-codiert ist. „Hallo“ würde beispielsweise als %E4%BD%A0%E5%A5%BD kodiert werden.


Als nächstes schauen wir uns an, wie man über das Formular hochlädt. Jeder sollte damit vertraut sein:


Dann erstellen Sie eine neue upload.txt-Textdatei nur mit den Worten „Hallo Welt“ und laden Sie sie hoch. Wir werden es verwenden. Verwenden Sie Fiddler, um das Paket zu erfassen. Sie können feststellen, dass die gesendeten Daten etwas komplizierter sind (viele andere irrelevante Anforderungszeilen wurden entfernt, z. B. Cache-Steuerung und Cookies):
<form action="http://www.qq.com" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" />
<input type="submit" value="submit" />
</form>
Nach dem Login kopieren

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

Host: www.qq.com
Inhaltslänge: 199

Inhaltstyp: multipart/form-databoundary= ----WebKitFormBoundarywr3X7sXBYQQ4ZF5G


------WebKitFormBoundarywr3X7sXBYQQ4ZF5G

Inhaltstyp: Text /plain


Hallo Welt

------WebKitFormBoundarywr3X7sXBYQQ4ZF5G--

Gemäß der Definition von RFC 1867 müssen wir ein Stück Grenzdaten generieren Daten können nicht an anderer Stelle im Inhalt angezeigt werden. Der Generierungsalgorithmus kann in jedem Browser unterschiedlich sein. Nach der Generierung der getrennten Daten können die getrennten Daten im Inhalt platziert werden. Der Typ des Headers, der an den Server gesendet wird, ist Content-Type oben: multipart/form-data; border=----WebKitFormBoundarywr3X7sXBYQQ4ZF5G. Darüber hinaus muss der hochgeladene Inhalt mithilfe von getrennten Daten in mehrere Segmente unterteilt werden Das Datensegment enthält den Dateinamen beim Hochladen. Der Server verwendet diesen Namen, um die Datei zu empfangen. In diesem Beispiel handelt es sich um den Dateityp „Text/Plain“. Das PNG-Bild ist image/png. Eine Leerzeile nach dem Dateityp ist der Inhalt der hochgeladenen Datei. In diesem Beispiel wird der besseren Verständlichkeit halber eine Textdatei hochgeladen, sodass der Inhalt direkt angezeigt werden kann, wenn eine Bilddatei hochgeladen wird ist eine Binärdatei, Fiddler. Sie zeigt nur verstümmelte Zeichen an. Nachdem der Inhalt der Datei beendet ist, gibt es eine Leerzeile plus Grenzdaten.

Nachdem Sie die Details des Sendeformats verstanden haben, besteht der nächste Schritt darin, NodeJS zum Implementieren der Programmierung zu verwenden. Um es einfach auszudrücken: Senden Sie die Daten einfach entsprechend dem Format an den Server.


Der Schwerpunkt dieses Artikels liegt darauf, das Protokoll zu verstehen und es mit Code zu implementieren. Es gibt viele Optimierungen in der Codeorganisation.

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

Schreiben Sie abschließend im lokalen Apache einfach eine PHP-Datei, um die hochgeladene Datei zum Testen zu speichern:



Darüber hinaus können Sie gemäß RFC 1867 auch die Funktion zum gleichzeitigen Hochladen mehrerer Dateien implementieren. Dies wird hier nicht im Detail beschrieben. Einzelheiten finden Sie in RFC 1867.

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

Das Obige ist die vom Herausgeber eingeführte Node.js-Implementierung des Datei-Uploads. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht pünktlich zu Ihnen. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!


Weitere Artikel zur Implementierung des Datei-Uploads durch Node.js finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage