Heim > Artikel > Web-Frontend > So implementieren Sie den Datei-Upload in nodejs+express
In diesem Artikel wird hauptsächlich die einfache Datei-Upload-Funktion mit nodejs+express vorgestellt.
1. Erstellen Sie ein Express-Projekt
express -e nodejs-uploadfile
2. Multer-Middleware herunterladen
npm i multer or yarn multer
3. Da auch Dateioperationen verwendet werden, muss das fs-Modul referenziert und angegeben werden Upload-Verzeichnis
const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads'
Einzeldatei-Upload: Die Dateien in index.html lauten wie folgt (der Typ der Formulardatei muss enctype="multipart/form-data" sein),
<form action="/upload" method="post" enctype="multipart/form-data"> <input name="fileUpload" type="file" /> <img src="" alt=""> <button type="submit">上传</button> </form>
in Routen Fügen Sie die Upload-Route zu /index.js hinzu, um den Vorgang des Hochladens von Dateien abzuwickeln
router.post('/upload', upload.single('fileUpload'), function (req, res, next) { const { file } = req; fs.readFile(file.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) { if (err) res.json({ err }) res.json({ msg: '上传成功' }); }); }) })
Wenn es sich bei der hochgeladenen Datei um ein Bild handelt, können Sie auch das FileReader-Objekt verwenden, um eine Vorschau des Bildes anzuzeigen
(function($){ $('input').on('change', function(event) { var files = event.target.files, reader = new FileReader(); if(files && files[0]){ reader.onload = function (ev) { $('img').attr('src', ev.target.result); } reader.readAsDataURL(files[0]); } }) }(jQuery))
Mehrere Datei-Uploads: mehr Das Prinzip des Datei-Uploads ist das gleiche wie das des Einzeldatei-Uploads. Der Code lautet wie folgt:
router.post('/upload', upload.array('fileUpload'), function (req, res, next) { const files = req.files; const response = []; const result = new Promise((resolve, reject) => { files.map((v) => { fs.readFile(v.path, function(err, data) { fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) { const result = { file: v, } if (err) reject(err); resolve('成功'); }) }) }) }) result.then(r => { res.json({ msg: '上传成功', }) }).catch(err => { res.json({ err }) }); })
Das Obige habe ich für alle zusammengestellt hilfreich für alle in der Zukunft.
Verwandte Artikel:
So ermitteln Sie, ob ein Variablenname in einem Array in JavaScript vorhanden ist
So implementieren Sie die verzögerte Ausblendfunktion durch JS
So verwenden Sie Angular, um die Timer-Funktion zu implementieren
So verwenden Sie Angular, um die dreieckige Pfeilbeschriftungsfunktion zu implementieren
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Datei-Upload in nodejs+express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!