Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion
In diesem Artikel wird hauptsächlich die einfache Datei-Upload-Funktion mit nodejs+express vorgestellt. Freunde, die sie benötigen, können darauf verweisen.
1. Express-Projekt erstellen
express -e nodejs-uploadfile
2. Multer-Middleware herunterladen
npm i multer or yarn multer
3. Referenzmulter in Routen/index.js. Da auch Dateioperationen verwendet werden, müssen Sie auch auf das fs-Modul verweisen und das Datei-Upload-Verzeichnis angeben
const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads'
Einzelner Datei-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>
Fügen Sie die Upload-Route in Routen/index.js hinzu, um den Vorgang des Hochladens von Dateien zu verwalten
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))
Mehrfacher Datei-Upload: Das Prinzip des Multi- Das Prinzip des Datei-Uploads und des Einzeldatei-Uploads ist dasselbe, 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 }) }); })
Zugehöriger Code finden Sie unter github.com/bWhirring/n…
Verwandte Empfehlungen:
Detaillierte Erklärung von Ajax und node.js Multer zur Implementierung der Datei-Upload-Funktion
Ein Beispiel für eine thinkjs-Datei Upload-Funktion
jQuery zur Implementierung der Bilddatei-Vorschaufunktion vor dem Hochladen
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!