Heim > Artikel > Web-Frontend > Eine kurze Diskussion darüber, wie der Knoten das Hochladen von Bildern implementiert

Eine kurze Diskussion darüber, wie der Knoten das Hochladen von Bildern implementiert

青灯夜游nach vorne: 2021-03-05 10:02:513782Durchsuche

In diesem Artikel erfahren Sie, wie Sie Bilddateien über node hochladen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „nodejs Tutorial“

In der Webentwicklung ist das Hochladen von Dateien ein sehr wichtiges Thema, insbesondere das Hochladen von Bildern und der erweiterte „Fortschrittsbalken“, „Dateigröße“ sowie die berühmten „domänenübergreifende“ Probleme.

Diese Demo demonstriert das Hochladen von Bildern und der Servercode ist node.

Front-End-Teil

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <input type="file" name="file" accept="image/*" onchange="changeImg(event)"/>
  <button onclick="submit()">上传</button>

  <script>
    let file = ''
    let fileName = ''

    function submit() {
      let data = new FormData()
      data.append('imgName', fileName)
      data.append('img', file)

      axios({
        method: 'post',
        timeout: 2000,
        url: 'http://localhost:8081/postApi',
        data: data
      })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }

    function changeImg(e) {
      file = e.target.files.item(0)   //只能选择一张图片
      // 如果不选择图片
      if (file === null) {
        return
      }
      fileName = file.name
    }
  </script>
</body>
</html>

Anfrage mit Axios senden——Tatsächlich können wir hier auch eine andere „domänenübergreifende Anforderungsmethode“ (vue-resource) verwenden, aber ich habe hier darüber nachgedacht. Oder verwenden Sie die domänenübergreifende Backend-Einstellungsmethode. Backend-Teil

Dies ist der Schwerpunkt dieses Artikels. Um Datei-Upload-Anfragen effizient und reibungslos zu analysieren, stellen wir zunächst die Bibliothek vor:

npm install formidable --save

Der beeindruckende Streaming-Parser macht es zu einer hervorragenden Verarbeitungsdatei Auswahl zum Hochladen, was bedeutet, dass es Datenblöcke beim Hochladen empfangen, analysieren und bestimmte Teile ausspucken kann. Ich glaube, Freunde, die mit Streams vertraut sind, werden es gut verstehen. Diese Methode ist nicht nur schnell, sondern verursacht auch keine Speichererweiterung, da viel Pufferung erforderlich ist. Selbst große Dateien wie Videos überfordern den Prozess nicht. formidable Natürlich müssen wir die myImage-Datei erstellen, um die hochgeladenen Bilder zu speichern. Anschließend erstellen wir ein IncomingForm-Instanzformular und legen den Speicherpfad auf den myImage-Ordner fest. Der Code lautet wie folgt:

const http=require('http');
const formidable=require('formidable');

var server=http.createServer(function(req,res){
	// 后端设置跨域
	res.setHeader('Access-Control-Allow-Origin','*');
	res.setHeader('Access-Control-Allow-Headers','Content-Type');
	res.setHeader('Content-Type','application/json');
	
	switch(req.method){
		case 'OPTIONS':
			res.statusCode=200;
			res.end();
			break;
		case 'POST':
			upload(req,res);
			break;
	}
})

function upload(req,res){
	if(!isFormData(req)){
		res.statusCode=400;
		res.end('请求错误,请使用multipart/form-data格式');
		return;
	}
	
	var form=new formidable.IncomingForm();
	// 设置上传图片保存文件
	form.uploadDir='./myImage';
	form.keepExtensions=true;
	
	form.on('field',(field,value)=>{
		console.log(field);
		console.log(value);
	})
	form.on('end',()=>{
		res.end('上传完成!');
	})
	form.parse(req);
}

function isFormData(req){
	let type=req.headers['content-type'] || '';
	return type.includes('multipart/form-data');
}

server.listen(8081,function(){
	console.log('port is on 8081');
})

Die setHeader-Zeilen der Zeilen 6, 7 und 8 sind besonders wichtig. Dies ist die Essenz der domänenübergreifenden Back-End-Funktion!

Upload-Fortschritt hinzufügen

Das nutzen wir auch oft und wollen es sehen! Dies wird den Benutzern ein hervorragendes Erlebnis bieten. Wir müssen nur Folgendes zum obigen Code hinzufügen:

	form.on('progress',(bytesReceived,bytesExpected)=>{
		var precent=Math.floor(bytesReceived/bytesExpected*100);
		console.log(precent);
	})

und dann den Fortschritt an den Browser des Benutzers zurücksenden. Das

formidable

formidable-Modul implementiert das Hochladen und Kodieren von Bildern und Videos. Es unterstützt die Upload-Datenverarbeitung auf GB-Ebene und unterstützt die Übermittlung mehrerer Kundendaten. Es verfügt über eine extrem hohe Testabdeckung und eignet sich sehr gut für den Einsatz in Produktionsumgebungen. Methoden und Eigenschaften des Formidable-Moduls – etwa:

Formidable.incomingForm()

Sie können ein Formular mit dieser Methode erstellen:

var form = new formidable.IncomingForm()；

Legen Sie die Feldkodierung über das Codierungsattribut fest.

form.encoding='utf-8';

Legen Sie den temporären Dateispeicher beim Hochladen fest Dateien über uploadDir Der Speicherort, der standardmäßige Speicherort für hochgeladene temporäre Dateien, ist os.tmpDir();

form.uploadDir='/tmp/';

Mit dem keepExtensions-Attribut kann festgelegt werden, ob der Dateiname der temporären Datei beim Hochladen der Datei die Erweiterung enthält. Wenn dieser Wert wahr ist, ist die Erweiterung enthalten; andernfalls ist die Erweiterung nicht enthalten.

form.keepExtensions=false

Es gibt auch eine wichtigere „Analysemethode“: Parsen der Daten, die von dem in der Anforderungsanforderung in node.js enthaltenen Formular übermittelt werden. cb ist die Callback-Funktion zur Bearbeitung von Anfragen (nicht erforderlich).

form.parse(req,function(err,fields,files){
    //...
});

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie der Knoten das Hochladen von Bildern implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-Thema 4: DrosselungNächster Artikel：JavaScript-Thema 4: Drosselung

In Verbindung stehende Artikel

Mehr sehen