Web-Frontend
js-Tutorial
Express+multer implementiert die spezifischen Schritte zum Hochladen von Knotenbildern
Express+multer implementiert die spezifischen Schritte zum Hochladen von Knotenbildern
Dieses Mal werde ich Ihnen die spezifischen Schritte von Express+Multer vorstellen, um das Hochladen von Knotenbildern zu implementieren. Was sind die Vorsichtsmaßnahmen für Express+Multer, um das Hochladen von Knotenbildern zu implementieren? Werfen wir einen Blick darauf.
Im Folgenden wird erläutert, wie Sie mit express+multer die Bild-Upload-Funktion im Knoten implementieren. Der spezifische Inhalt lautet wie folgt:
Im Frontend verwenden wir Ajax, um Bilder asynchron hochzuladen, verwenden die Dateieingabe zum Hochladen von Bildern, verwenden Formdata-Objekte, um Bilddaten zu verarbeiten und auf dem Server zu posten
Verwenden Sie MulterMiddleware im Knoten, um die Upload-Routing-Schnittstelle zu verarbeiten
Multer-Dokumentation
package.jsonHTML-Teil
<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>
js-Teil
<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>NodeJS-Logikcode
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')
})Ich fühle mich gut, aber ich weiß nicht, warum der Blogpark die Homepage für mich entfernen will....
再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Detaillierte Erklärung der Cookie-Nutzung in Django
So ersetzen Sie URL-Parameter durch reguläres JS
Das obige ist der detaillierte Inhalt vonExpress+multer implementiert die spezifischen Schritte zum Hochladen von Knotenbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
So implementieren Sie das Hochladen und Verarbeiten von Dateien in FastAPI
Jul 28, 2023 pm 03:01 PM
So implementieren Sie das Hochladen und Verarbeiten von Dateien in FastAPI. FastAPI ist ein modernes, leistungsstarkes Web-Framework, das einfach zu verwenden und leistungsstark ist. Es bietet native Unterstützung für das Hochladen und Verarbeiten von Dateien. In diesem Artikel erfahren Sie, wie Sie Funktionen zum Hochladen und Verarbeiten von Dateien im FastAPI-Framework implementieren, und stellen Codebeispiele zur Veranschaulichung spezifischer Implementierungsschritte bereit. Zuerst müssen wir die erforderlichen Bibliotheken und Module importieren: fromfastapiimportFastAPI,UploadF
So löschen Sie einen Knoten in NVM
Dec 29, 2022 am 10:07 AM
So löschen Sie einen Knoten mit nvm: 1. Laden Sie „nvm-setup.zip“ herunter und installieren Sie es auf dem Laufwerk C. 2. Konfigurieren Sie Umgebungsvariablen und überprüfen Sie die Versionsnummer mit dem Befehl „nvm -v“. install“-Befehl Knoten installieren; 4. Löschen Sie den installierten Knoten über den Befehl „nvm uninstall“.
Einfache Schritte zum Hochladen Ihrer eigenen Musik auf Kugou
Mar 25, 2024 pm 10:56 PM
1. Öffnen Sie Kugou Music und klicken Sie auf Ihr Profilbild. 2. Klicken Sie auf das Symbolset in der oberen rechten Ecke. 3. Klicken Sie auf [Musikwerke hochladen]. 4. Klicken Sie auf [Werke hochladen]. 5. Wählen Sie das Lied aus und klicken Sie auf [Weiter]. 6. Klicken Sie abschließend auf [Hochladen].
So verwenden Sie Express für den Datei-Upload im Knotenprojekt
Mar 28, 2023 pm 07:28 PM
Wie gehe ich mit dem Datei-Upload um? Der folgende Artikel stellt Ihnen vor, wie Sie Express zum Hochladen von Dateien im Knotenprojekt verwenden. Ich hoffe, er ist hilfreich für Sie!
So laden Sie Songtexte auf QQ Music hoch
Feb 23, 2024 pm 11:45 PM
Mit dem Aufkommen des digitalen Zeitalters sind Musikplattformen zu einer der wichtigsten Möglichkeiten für Menschen geworden, an Musik zu gelangen. Wenn wir jedoch ein Lied hören, stellen wir manchmal fest, dass es keinen Text gibt, was sehr beunruhigend ist. Viele Menschen hoffen, dass beim Anhören von Liedern Liedtexte angezeigt werden können, um den Inhalt und die Emotionen der Lieder besser zu verstehen. QQ Music, eine der größten Musikplattformen in China, bietet Benutzern auch die Funktion zum Hochladen von Liedtexten, damit Benutzer die Musik besser genießen und die Konnotation des Liedes spüren können. Im Folgenden erfahren Sie, wie Sie Liedtexte auf QQ Music hochladen. Erste
So lösen Sie das Problem der langsamen Upload-Geschwindigkeit auf einem Win10-Computer
Jul 01, 2023 am 11:25 AM
Wie kann die langsame Upload-Geschwindigkeit eines Win10-Computers behoben werden? Wenn wir den Computer benutzen, haben wir möglicherweise das Gefühl, dass die Datei-Upload-Geschwindigkeit unseres Computers sehr langsam ist. Wie ist die Situation? Tatsächlich liegt dies daran, dass die Standard-Upload-Geschwindigkeit des Computers 20 % beträgt, sodass viele Freunde nicht wissen, wie man im Detail vorgeht. Der Editor hat die Schritte zum Formatieren des C-Laufwerks in Win11 unten zusammengestellt . Wenn Sie interessiert sind, folgen Sie uns unten! Lösung für die langsame Upload-Geschwindigkeit von Win10 1. Drücken Sie win+R, um run aufzurufen, geben Sie gpedit.msc ein und drücken Sie die Eingabetaste. 2. Wählen Sie die Verwaltungsvorlage aus, klicken Sie auf „Netzwerk – Qos-Paketplaner“ und doppelklicken Sie auf „Begrenzen“, um Bandbreite zu reservieren. 3. Wählen Sie „Aktiviert“. Daraufhin wird Folgendes angezeigt:
Eine ausführliche Analyse des Prozessmanagement-Tools „pm2' von Node
Apr 03, 2023 pm 06:02 PM
In diesem Artikel stellen wir Ihnen das Prozessmanagement-Tool „pm2“ von Node vor und sprechen darüber, warum PM2 benötigt wird und wie Sie PM2 installieren und verwenden. Ich hoffe, dass es für alle hilfreich ist!
So verbessern Sie die Upload-Geschwindigkeit Ihres Computers
Jan 15, 2024 pm 06:51 PM
Die Upload-Geschwindigkeit wird sehr langsam? Ich glaube, dass dies ein Problem ist, auf das viele Freunde beim Hochladen von Dateien auf ihren Computer stoßen. Wenn das Netzwerk beim Übertragen von Dateien über einen Computer instabil ist, ist die Upload-Geschwindigkeit sehr langsam. Im Folgenden erklärt Ihnen der Herausgeber, wie Sie das Problem der langsamen Upload-Geschwindigkeit des Computers lösen können. Wenn es um die Netzwerkgeschwindigkeit geht, wissen wir alle, dass die Geschwindigkeit beim Öffnen von Webseiten, die Download-Geschwindigkeit und die Upload-Geschwindigkeit ebenfalls sehr wichtig sind. Insbesondere einige Benutzer müssen häufig Dateien auf die Netzwerkfestplatte hochladen, sodass eine schnelle Upload-Geschwindigkeit zweifellos zu Einsparungen führt Sie sparen viel Geld. Was soll ich tun, wenn die Upload-Geschwindigkeit langsam ist? Nachfolgend stellt Ihnen der Editor Bilder und Texte zum Umgang mit langsamen Upload-Geschwindigkeiten auf dem Computer vor. Wie kann das Problem der langsamen Upload-Geschwindigkeit des Computers gelöst werden? Klicken Sie auf „Start – Ausführen“ oder „Fenstertaste“.
