Maison > Article > interface Web > Une brève discussion sur la façon dont le nœud implémente le téléchargement d'images

Une brève discussion sur la façon dont le nœud implémente le téléchargement d'images

青灯夜游avant: 2021-03-05 10:02:513716parcourir

Cet article vous présentera comment télécharger des fichiers image à l'aide de node. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "tutoriel nodejs"

Dans le développement Web, le téléchargement de fichiers est une question très importante, en particulier le téléchargement d'images, ainsi que la « barre de progression » étendue, la « taille du fichier » et les fameux problèmes « inter-domaines ».

Cette démo montre le téléchargement d'images et le code du serveur est node.

Partie front-end

<!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>

AcquisitionUtiliser axios pour envoyer des requêtes - En fait, on peut aussi utiliser une autre "méthode de requête inter-domaines" " ici ( vue-resource), mais j'y ai pensé ici. Ou utilisez la méthode paramètres backend cross-domain.

Partie backend

C'est l'objet de cet article Afin d'analyser les demandes de téléchargement de fichiers de manière efficace et fluide, nous présentons d'abord la bibliothèque formidable. :

npm install formidable --save

Le formidable analyseur de streaming en fait un excellent choix pour gérer les téléchargements de fichiers, ce qui signifie qu'il peut recevoir des morceaux de données au fur et à mesure de leur téléchargement, les analyser et recracher des parties spécifiques. Je pense que vous êtes familier avec le streaming. Les amis comprendront facilement. Cette méthode est non seulement rapide, mais n'entraîne pas non plus d'extension de mémoire en raison de la nécessité d'une grande quantité de mémoire tampon. Même les fichiers volumineux tels que les vidéos ne submergeront pas le processus.
Bien sûr, nous devons créer le fichier myImage pour stocker les images téléchargées. Ensuite, nous créons un formulaire d'instance IncomingForm et définissons le chemin de stockage vers le dossier myImage. Le code est le suivant :

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');
})

Les lignes setHeader des lignes 6, 7 et 8 sont particulièrement importantes. C'est l'essence même du cross-domain back-end !

Ajouter la progression du téléchargement

C'est aussi ce que nous utilisons couramment et ce que nous voulons voir ! Cela offrira aux utilisateurs une excellente expérience.
Il suffit d'ajouter :

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

au code ci-dessus, puis de renvoyer la progression au navigateur de l'utilisateur.

formidable

Le formidable module implémente le téléchargement et l'encodage d'images et de vidéos. Il prend en charge le traitement des données de téléchargement au niveau Go et prend en charge plusieurs soumissions de données client. Il offre une couverture de test extrêmement élevée et convient parfaitement à une utilisation dans des environnements de production.
Méthodes et propriétés du formidable module - autour de : Formidable.incomingForm()

Vous pouvez créer un formulaire grâce à cette méthode :

var form = new formidable.IncomingForm()；

Set via le attribut d'encodage Codage du champ

form.encoding='utf-8';

Utilisez uploadDir pour définir l'emplacement où les fichiers temporaires sont stockés lors du téléchargement de fichiers. L'emplacement de stockage des fichiers temporaires téléchargés par défaut est os.tmpDir();

form.uploadDir='/tmp/';

Le téléchargement de fichiers peut être effectué. être défini via l'attribut keepExtensions. Si le nom du fichier temporaire inclut l'extension. Si cette valeur est vraie, l'extension est incluse ; sinon, l'extension n'est pas incluse.

form.keepExtensions=false

Il existe également une "méthode d'analyse" plus importante : analyser les données soumises par le formulaire contenu dans la requête de requête dans node.js. cb est la fonction de rappel pour le traitement des requêtes (non obligatoire).

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Sujet JavaScript 4 : LimitationArticle suivant：Sujet JavaScript 4 : Limitation

Articles Liés

Voir plus