interface Web
js tutoriel
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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Implémenter le téléchargement et le téléchargement de fichiers dans les documents Workerman
Nov 08, 2023 pm 06:02 PM
Pour implémenter le téléchargement et le téléchargement de fichiers dans des documents Workerman, des exemples de code spécifiques sont requis Introduction : Workerman est un framework de communication réseau asynchrone PHP hautes performances, simple, efficace et facile à utiliser. Dans le développement réel, le téléchargement et le téléchargement de fichiers sont des exigences fonctionnelles courantes. Cet article explique comment utiliser le framework Workerman pour implémenter le téléchargement et le téléchargement de fichiers, et donne des exemples de code spécifiques. 1. Téléchargement de fichiers : le téléchargement de fichiers fait référence à l'opération de transfert de fichiers de l'ordinateur local vers le serveur. Ce qui suit est utilisé
Comment utiliser Laravel pour implémenter les fonctions de téléchargement et de téléchargement de fichiers
Nov 02, 2023 pm 04:36 PM
Comment utiliser Laravel pour implémenter les fonctions de téléchargement et de téléchargement de fichiers Laravel est un framework Web PHP populaire qui fournit une multitude de fonctions et d'outils pour rendre le développement d'applications Web plus facile et plus efficace. L'une des fonctions couramment utilisées est le téléchargement et le téléchargement de fichiers. Cet article expliquera comment utiliser Laravel pour implémenter les fonctions de téléchargement et de téléchargement de fichiers, et fournira des exemples de code spécifiques. Téléchargement de fichiers Le téléchargement de fichiers fait référence au téléchargement de fichiers locaux sur le serveur pour le stockage. Dans Laravel, nous pouvons utiliser le téléchargement de fichiers
Comment résoudre l'exception de téléchargement de fichiers Java (FileUploadException)
Aug 18, 2023 pm 12:11 PM
Comment résoudre l'exception de téléchargement de fichiers Java (FileUploadException). Un problème souvent rencontré dans le développement Web est FileUploadException (exception de téléchargement de fichiers). Cela peut se produire pour diverses raisons telles qu'une taille de fichier dépassant la limite, une incompatibilité de format de fichier ou une configuration incorrecte du serveur. Cet article décrit quelques méthodes pour résoudre ces problèmes et fournit des exemples de code correspondants. Limiter la taille des fichiers téléchargés Dans la plupart des scénarios, limitez la taille du fichier
Comment utiliser gRPC pour implémenter le téléchargement de fichiers dans Golang ?
Jun 03, 2024 pm 04:54 PM
Comment implémenter le téléchargement de fichiers à l'aide de gRPC ? Créez des définitions de service de support, y compris des messages de demande et de réponse. Sur le client, le fichier à télécharger est ouvert et divisé en morceaux, puis diffusé sur le serveur via un flux gRPC. Côté serveur, des fragments de fichiers sont reçus et stockés dans un fichier. Le serveur envoie une réponse une fois le téléchargement du fichier terminé pour indiquer si le téléchargement a réussi.
Téléchargement et traitement de fichiers dans Laravel : gestion des fichiers téléchargés par les utilisateurs
Aug 13, 2023 pm 06:45 PM
Téléchargement et traitement de fichiers dans Laravel : gestion des fichiers téléchargés par les utilisateurs Introduction : Le téléchargement de fichiers est une exigence fonctionnelle très courante dans les applications Web modernes. Dans le framework Laravel, le téléchargement et le traitement de fichiers deviennent très simples et efficaces. Cet article explique comment gérer les fichiers téléchargés par les utilisateurs dans Laravel, y compris la vérification, le stockage, le traitement et l'affichage des téléchargements de fichiers. 1. Téléchargement de fichiers Le téléchargement de fichiers fait référence au téléchargement de fichiers du client vers le serveur. Dans Laravel, les téléchargements de fichiers sont très simples à gérer. d'abord,
L'applet WeChat implémente la fonction de téléchargement d'images
Nov 21, 2023 am 09:08 AM
L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat
Enseignement du nœud PI: Qu'est-ce qu'un nœud PI? Comment installer et configurer le nœud PI?
Mar 05, 2025 pm 05:57 PM
Explication détaillée et guide d'installation pour les nœuds de pignon Cet article introduira l'écosystème de pignon en détail - nœuds PI, un rôle clé dans l'écosystème de pignon et fournir des étapes complètes pour l'installation et la configuration. Après le lancement du réseau de test de la blockchain pèse, les nœuds PI sont devenus une partie importante de nombreux pionniers participant activement aux tests, se préparant à la prochaine version du réseau principal. Si vous ne connaissez pas encore Pinetwork, veuillez vous référer à ce qu'est Picoin? Quel est le prix de l'inscription? PI Utilisation, exploitation minière et sécurité. Qu'est-ce que Pinetwork? Le projet Pinetwork a commencé en 2019 et possède sa pièce exclusive de crypto-monnaie PI. Le projet vise à en créer un que tout le monde peut participer
Comment implémenter la barre de progression du téléchargement de fichiers FTP en utilisant PHP
Jul 30, 2023 pm 06:51 PM
Comment utiliser PHP pour implémenter la barre de progression du téléchargement de fichiers FTP 1. Introduction générale Dans le développement de sites Web, le téléchargement de fichiers est une fonction courante. Pour le téléchargement de fichiers volumineux, afin d'améliorer l'expérience utilisateur, nous devons souvent afficher une barre de progression du téléchargement à l'utilisateur pour l'informer du processus de téléchargement du fichier. Cet article explique comment utiliser PHP pour implémenter la fonction de barre de progression du téléchargement de fichiers FTP. 2. L'idée de base de la mise en œuvre de la barre de progression du téléchargement de fichiers FTP est généralement calculée en calculant la taille du fichier téléchargé et la taille du fichier téléchargé.
