Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion

Ausführliche Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion

小云云
Freigeben: 2017-12-27 14:03:25
Original
2519 Leute haben es durchsucht

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
Nach dem Login kopieren

2. Multer-Middleware herunterladen


npm i multer or yarn multer
Nach dem Login kopieren

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'
Nach dem Login kopieren

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>
Nach dem Login kopieren

Fügen Sie die Upload-Route in Routen/index.js hinzu, um den Vorgang des Hochladens von Dateien zu verwalten


router.post(&#39;/upload&#39;, upload.single(&#39;fileUpload&#39;), 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: &#39;上传成功&#39;
  });
 });
 })
})
Nach dem Login kopieren

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($){
 $(&#39;input&#39;).on(&#39;change&#39;, function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $(&#39;img&#39;).attr(&#39;src&#39;, ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))
Nach dem Login kopieren

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(&#39;/upload&#39;, upload.array(&#39;fileUpload&#39;), 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(&#39;成功&#39;);
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: &#39;上传成功&#39;,
 })
 }).catch(err => {
 res.json({ err })
 });
})
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage