suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie den Multi-Upload

So verwenden Sie den Multi-Upload

php中世界最好的语言
php中世界最好的语言Original
2018-04-16 11:43:181441Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Multer-Upload verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Multer-Upload gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Es gibt immer noch eine Menge Vorteile, hauptsächlich aufgrund einiger Details bei 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 die Verbindung zwischen Mongodb und der MySQL-Datenbank getestet. Daher möchte ich zuerst das vorhandene Framework verwenden und dann den Knoten rückwärts lernen.

Als Rahmen habe ich mich für Express entschieden.

Die Hauptsache ist, die in mehreren Büchern erwähnte Middleware zu testen. Sie wurde etwas früher geschrieben und viele APIs sind veraltet, um nach und nach aktualisierte Stellen zu finden.

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

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 untersuchen.

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

Geben Sie den Code ein: 

//main.js
let express = require('express');
var multer = require('multer')
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
   cb(null, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
 })
var upload = multer({ storage: storage })
//var upload = multer({ dest: 'public/' })
 
let app = express()
app.use(express.static('public'))
app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{
  console.log(req.file)
  res.send(req.file)
})
app.listen(3300,'127.0.0.1')
<!-- 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('file');
    file.onchange = function (e) {
      let file = e.target.files[0];
      let xhr = new XMLHttpRequest();
      let fd = new FormData();
      fd.append('myfile', file)
      xhr.open('post', '/public/index.html')
      xhr.onload = function () {
        // console.log(xhr)
        if (xhr.status === 200) {
          let data = JSON.parse(xhr.responseText)
          document.getElementById('result').innerHTML = this.response
          document.getElementById('img').src = data.filename
        }
      }
      xhr.send(fd)
    }
  </script>
</body>
</html>

Ich möchte nicht auf die JQuery-Bibliothek verweisen, also habe ich natives Ajax geschrieben. Kurz gesagt, nach dem Klicken auf die Schaltfläche zum Auswählen des Bildes werden die Bildinformationen in ein Objekt eingefügt Schlüsselname myfile und an Backstage übergeben.

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

var upload = multer({ dest: 'public/' })

Tatsächlich habe ich diese Codezeile am Anfang verwendet. dest bedeutet, einen Pfad zum Speichern der Datei auszuwählen, aber es gibt ein kleines Problem beim Schreiben auf diese Weise. Die gespeicherte Datei hat kein Suffix.

Wenn ich die Daten an der Rezeption zurückgebe

res.send(req.file)

Dieses Problem ist sehr schwerwiegend. In einem Szenario lade ich beispielsweise ein Bild als Avatar hoch, aber wenn ich das nächste Mal meine persönliche Seite betrete, können die vom Hintergrund an mich zurückgegebenen Daten nicht als Adresse des Bildes verwendet werden ist sehr mühsam. 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, 'public/');
  },
  filename: function (req, file, cb) {
   cb(null, Date.now() + '.png');
  }
})
var upload = multer({ storage: storage })

destination ist die Adresse, an der die Datei gespeichert ist, und filename legt den Namen der Datei fest. Wenn es hier so geschrieben ist: 

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

Sie werden feststellen, dass der Name jedes von Ihnen übergebenen Bildes myfile.png lautet und das neue das alte überschreibt. 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.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Texteditorkomponente Summernote von BootStrap

Operationssuchkomponente zur Anzeige auf die Tastatur

Jquery sendet Array-Daten mithilfe der SpringMVC-Empfangsmethode

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Multi-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Analysieren der Prioritätswarteschlange und der Umlaufwarteschlange von JSNächster Artikel：Analysieren der Prioritätswarteschlange und der Umlaufwarteschlange von JS

In Verbindung stehende Artikel

Mehr sehen