Ausführliche Erklärung zum Hochladen und Verwenden von Express Multer-js-Tutorial-php.cn

Ausführliche Erklärung zum Hochladen und Verwenden von Express Multer

小云云

Freigeben： 2018-01-20 10:30:38

Original

1756 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von Multer-Upload in der Express-Serie vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ich habe „The Definitive Guide to NodeJS“ schon lange gelesen, aber ich habe es nie sorgfältig gelesen Zeit.

Es gibt immer noch viele Vorteile, hauptsächlich aufgrund einiger Details der Verwendung von Wenpack. Außerdem bin ich nicht mehr verwirrt über den Knoten. Aber um ehrlich zu sein, ist es auf der aktuellen Ebene ziemlich schwierig, etwas direkt mit dem Knoten zu tun. Heute habe ich den Link zur Mongodb- und MySQL-Datenbank getestet. Obwohl er verwendet werden kann, ist er immer noch seltsam. Daher möchte ich zuerst das vorhandene Framework verwenden und dann den Knoten rückwärts lernen.

Für das Framework habe ich mich entschieden

Ich habe hauptsächlich die in mehreren Büchern erwähnte Middleware getestet und viele APIs sind veraltet ein aktualisierter Ort.

Was ich derzeit nützlich finde, sind: Multer und Statik.

Letzterer kann die Seite lokal debuggen, was besonders für mobile Seiten nützlich ist.

Dieses Mal werde ich hauptsächlich über Multer sprechen. Ich habe nicht alle Funktionen implementiert, sondern nur die Funktion zum Hochladen eines einzelnen Bildes, und ich werde die anderen erkunden.

Dies ist das gesamte Dateiverzeichnis, es gibt zwei Hauptdateien, eine ist main.js im Stammverzeichnis und die andere ist public/index.html.

Platzieren Sie den Code:

//main.js
let express = require(&#39;express&#39;);

var multer = require(&#39;multer&#39;)

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
 })
 
var upload = multer({ storage: storage })

//var upload = multer({ dest: &#39;public/&#39; })
 

let app = express()

app.use(express.static(&#39;public&#39;))

app.post(&#39;/public/index.html&#39;,upload.single(&#39;myfile&#39;),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})

app.listen(3300,&#39;127.0.0.1&#39;)

Nach dem Login kopieren

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" id="file" accept="image/*">
  <p id="result"></p>
  <img src="" alt="" id="img" width="40" height="40">
  <script>
    let file = document.getElementById(&#39;file&#39;);
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append(&#39;myfile&#39;, file)
      xhr.open(&#39;post&#39;, &#39;/public/index.html&#39;)
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById(&#39;result&#39;).innerHTML = this.response
          document.getElementById(&#39;img&#39;).src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>

</html>

Nach dem Login kopieren

Ich möchte nicht auf die JQuery-Bibliothek verweisen , also habe ich nativ Ajax geschrieben, im Allgemeinen sollte es nicht schwierig sein, nach dem Klicken auf die Schaltfläche zum Auswählen des Bildes werden die Bildinformationen in einem Objekt mit dem Schlüsselnamen myfile platziert und an den Hintergrund übergeben.

Express speichert die empfangenen Bilder in der /public/-Datei. Hier gibt es eine kleine Gefahr. Sie können sehen, dass ich diese Codezeile in main.js kommentiert habe:

var upload = multer({ dest: &#39;public/&#39; })

Nach dem Login kopieren

Tatsächlich habe ich diese Codezeile am Anfang verwendet, was <🎜 bedeutet > Es muss ein Pfad zum Speichern der Datei ausgewählt werden, es gibt jedoch ein kleines Problem beim Schreiben auf diese Weise. Die gespeicherte Datei hat kein Suffix. dest

Wenn ich Daten an die Rezeption zurückgebe

res.send(req.file)

Nach dem Login kopieren

In einem Szenario lade ich beispielsweise ein Bild hoch Wenn ich jedoch das nächste Mal meine persönliche Seite betrete, können die vom Hintergrund zurückgegebenen Daten nicht als Adresse des Bildes verwendet werden, was sehr problematisch ist. Also habe ich im Internet einen Grund gefunden und den obigen Codekommentar durch diesen ersetzt:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, &#39;public/&#39;);
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + &#39;.png&#39;);
  }
})

var upload = multer({ storage: storage })

Nach dem Login kopieren

ist die Adresse, an der die Datei gespeichert ist, und destination Einstellungen ist der Name der Datei. Wenn er dann so geschrieben ist: filename

filename: function (req, file, cb) {
 cb(null, file.fieldname + &#39;.png&#39;);
}

Nach dem Login kopieren

, werden Sie feststellen, dass der Name jedes Bildes, das Sie übergeben, , das neue überschreibt das alte. Um also alle übergebenen Bilder zu speichern, verwende ich Date.now() als unterschiedliche Kennung für jedes Bild, damit es nicht zu einem Überschreiben kommt.

myfile.pngDas war's vorerst. Ich werde es das nächste Mal aktualisieren, wenn ich weitere Bilder hochlade.

Verwandte Empfehlungen:

Detaillierte Erklärung von Ajax und node.js Multer zur Implementierung der Datei-Upload-Funktion

Multer-Definition und Nutzungszusammenfassung

Nodejs advanced: Datei-Upload-Beispiel basierend auf Express+Multer

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Hochladen und Verwenden von Express Multer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!