interface Web
js tutoriel
Express et multer implémentent la fonction de téléchargement d'image dans le nœud
Express et multer implémentent la fonction de téléchargement d'image dans le nœud
Dans le front-end, nous utilisons ajax pour télécharger des images de manière asynchrone, utilisons file-input pour télécharger des images, utilisons des objets formdata pour traiter les données d'image, publions sur le serveur et utilisons le middleware multer dans le nœud pour traiter l'interface de routage de téléchargement. . Cet article présente principalement l'utilisation d'express+multer pour implémenter la fonction de téléchargement d'images dans le nœud. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
document multiter
package.json
partie html
<body> <p class="form-group"> <label>File input:</label> <input type="file" name="file" id="file"> <p id="result"></p> <img id="img" src=""> </p> <button id="upload" class="btn btn-default">提交</button> </body>
partie js
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//上传图片的业务逻辑函数
function uploadFile(){
//上传图片的input
var file = document.getElementById("file")
//因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
//创建formdata对象
var formData = new FormData();
//给formdata对象中放入数据(键值对的方式)
formData.append('file',file.files[0]);
//提交请求
$.ajax({
url: '/upload',//请求路径
type: 'POST',
data: formData,
contentType: false,//为了让浏览器根据传入的formdata来判断contentType
processData: false,//同上
success: function(data){
if(200 === data.code) {
$('#result').html("上传成功！");
$('#img').attr('src',data.data);
} else {
$('#result').html("上传失败！");
}
console.log(2)
},
error: function(){
$("#result").html("与服务器通信发生错误");
}
});
console.log(1)
}
//给按钮添加点击事件
function postPage() {
//上传按钮
var uploada = document.getElementById('upload');
uploada.addEventListener("click",function () {
uploadFile();
},false);
}
window.onload = function () {
postPage();
}
</script>Code logique NodeJS
const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(__dirname, 'public')));
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
//确定图片存储的位置
destination: function (req, file, cb){
cb(null, './public/uploadImgs')
},
//确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
filename: function (req, file, cb){
cb(null, Date.now()+file.originalname)
}
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
//图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
//线上的也就是服务器中的图片的绝对地址
var url = '/uploadImgs/' + req.file.filename
res.json({
code : 200,
data : url
})
});
http.createServer(app).listen(3000,()=>{
console.log('server is listening')
})Je me sens bien dans ma peau, mais je ne sais pas pourquoi le parc de blogs a supprimé la page d'accueil pour moi....
再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
} Recommandations associées :
Éditeur Kindeditor ajoutant la méthode d'implémentation du filigrane de téléchargement d'image
Partage d'exemples de plug-in de téléchargement d'image ThinkPHP5.0
Implémentation PHP du partage de code d'exemple de téléchargement d'image d'applet WeChat
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
AI Hentai Generator
Générez AI Hentai gratuitement.
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)
Comment supprimer un nœud dans NVM
Dec 29, 2022 am 10:07 AM
Comment supprimer un nœud avec nvm : 1. Téléchargez « nvm-setup.zip » et installez-le sur le lecteur C ; 2. Configurez les variables d'environnement et vérifiez le numéro de version via la commande « nvm -v » 3. Utilisez la commande « nvm » ; install" commande Installer le nœud ; 4. Supprimez le nœud installé via la commande "nvm uninstall".
Comment utiliser Express pour gérer le téléchargement de fichiers dans un projet de nœud
Mar 28, 2023 pm 07:28 PM
Comment gérer le téléchargement de fichiers ? L'article suivant vous expliquera comment utiliser Express pour gérer les téléchargements de fichiers dans le projet de nœud. J'espère qu'il vous sera utile !
Une analyse approfondie de l'outil de gestion de processus de Node « pm2 »
Apr 03, 2023 pm 06:02 PM
Cet article partagera avec vous l'outil de gestion de processus de Node "pm2" et expliquera pourquoi pm2 est nécessaire, comment installer et utiliser pm2, j'espère qu'il sera utile à tout le monde !
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
Parlons de la façon d'utiliser pkg pour empaqueter des projets Node.js dans des fichiers exécutables.
Dec 02, 2022 pm 09:06 PM
Comment empaqueter le fichier exécutable nodejs avec pkg ? L'article suivant vous expliquera comment utiliser pkg pour empaqueter un projet Node dans un fichier exécutable. J'espère qu'il vous sera utile !
Que faire si le nœud npm gyp échoue
Dec 29, 2022 pm 02:42 PM
npm node gyp a échoué car les versions de « node-gyp.js » et « Node.js » ne correspondaient pas. La solution : 1. Videz le cache du nœud via « npm cache clean -f » 2. Via « npm install - ». g n" Installez le module n ; 3. Installez la version "node v12.21.0" via la commande "n v12.21.0".
Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ?
Feb 24, 2023 pm 07:33 PM
Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ? L'article suivant vous présentera comment utiliser Node pour implémenter un système d'authentification unique. J'espère qu'il vous sera utile !
Comparaison approfondie d'Express et de Laravel : Comment choisir le meilleur framework ?
Mar 09, 2024 pm 01:33 PM
Comparaison approfondie d'Express et de Laravel : Comment choisir le meilleur framework ? Lorsque vous choisissez un framework back-end adapté à votre projet, Express et Laravel sont sans aucun doute deux choix populaires parmi les développeurs. Express est un framework léger basé sur Node.js, tandis que Laravel est un framework populaire basé sur PHP. Cet article fournira une comparaison approfondie des avantages et des inconvénients de ces deux frameworks et fournira des exemples de code spécifiques pour aider les développeurs à choisir le framework qui correspond le mieux à leurs besoins. Performances et évolutivitéExpr
