Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien

Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien

Dieser Artikel verwendet Express als Server und die von der Bibliothek express-fileupload bereitgestellte Middleware-Funktion, um Bilder vom Client anzunehmen und sie als Dateien auf dem Server zu speichern. Der Client verwendet das Create-React-App-Framework, die Bootstrap-Benutzeroberfläche und Axios, um HTTP-Anfragen zu senden und den aktuellen Fortschrittswert des Fortschrittsbalkens bereitzustellen. Nach erfolgreichem Upload wird das Bild entsprechend seinem Standort auf dem Server angezeigt.

Initialisieren des Projekts

mkdir react-file-upload // Erstellen Sie das Stammverzeichnis des Projekts cd react-file-upload
npm init -y // npm initialisieren und package.json erstellen

Installieren Sie einige notwendige Abhängigkeiten

npm ich express express-dateiupload
npm i -D nodemon gleichzeitig // Sie können Client und Server parallel ausführen (testen Sie es auf Ihrem lokalen Computer)

Ändern Sie das Skript in react-file-upload/package.json

{
  "main": "server.js",
  "Skript" : {
    "Start": "Knotenserver.js", 
    "Server": "nodemon server.js",
    "Client": "npm start --prefix client",  
    "dev": " gleichzeitig \"npm run server\" \"npm run client\" "
  }
}
  • main zu server.js
  • Starten Sie Express mit Node
  • Der Server verwendet Nodemon, um Express zu starten. Nodemon überwacht, ob sich die Datei server.js geändert hat (Strg+S). Wenn eine Änderung vorliegt, starten Sie den Server neu, der Node-Start jedoch nicht. Sie müssen den Dienst manuell neu starten (Strg+C und Node server.js nach der Änderung der Datei erneut ausführen).
  • Der Client startet den Client und dann erstellen wir einen Client-Ordner, um React-Komponenten zu schreiben
  • dev verwendet concurrently, um Server und Client gleichzeitig zu starten

Schreiben des Servers

Schreiben wir die Datei server.js

const express = erfordern('express');
const fileUpload = erforderlich('express-fileupload');

const app = express();
// Verwenden Sie die Express-Fileupload-Middleware app.use( fileUpload() );

// Verarbeite die von der /upload-Seite gesendete Post-Anfrage app.post('/upload', (req, res) => {
  // Die Dateieigenschaft in der Anforderung wird von der Express-Fileupload-Middleware hinzugefügt!? (Frage vorübergehend gespeichert)
  //Überprüfen Sie, ob das Dateiattribut vorhanden ist und ob eine Datei vorhanden ist. Andernfalls geben Sie 400 zurück.
  wenn (req.files === null) {
    return res.status(400).json({msg:'keine Datei hochgeladen'});
  }
  // Andernfalls die Datei abrufen. // Datei wird durch den ersten Parameter von formData.append('file', file) im folgenden Text definiert und kann auf andere Namen angepasst werden. const file = req.files.file;
  // Verschiebe die Datei an den durch den ersten Parameter angegebenen Speicherort. Wenn ein Fehler auftritt, gib 500 zurück.
  Datei.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
    wenn(fehler){
      Konsole.Fehler(Fehler);
      returniere res.status(500).send(err);
    }
    // Wenn kein Fehler vorliegt, gib ein JSON zurück 
    // Wir planen, die hochgeladene Datei nach dem Hochladen entsprechend dem Pfad der Datei auf dem Server anzuzeigen // Wir werden dies dann in der React-Komponente implementieren // Erstellen Sie einen Upload-Ordner unter dem öffentlichen Ordner im Client, um die hochgeladenen Dateien zu speichern res.json({fileName: file.name, filePath: `uploads/${file.name}`});
  });
});

app.listen(5000,() => {console.log('Server gestartet...')});

Führen Sie server.js nun erneut aus, um sicherzustellen, dass keine Fehler vorliegen. In der Konsole wird „Server gestartet“ angezeigt …

npm-Server ausführen

Initialisieren des Clients

Anschließend erstellen wir den Client und initialisieren das Projekt mithilfe des Create-React-App-Gerüsts

npx Create-React-App-Client

Nach Abschluss der Initialisierung können wir einige unnötige Dateien selektiv löschen

  • serviceWorker.js
  • logo.svg
  • index.css // Später werden wir den Link-Tag verwenden, um Bootstrap vom CDN zu importieren
  • App.test.js // Nur eine kleine Demo

Wir löschen das in der Datei src / index.js eingeführte index.css und führen das Bootstrap-CSS und -JS direkt in die Vorlagendatei index.html im öffentlichen Ordner ein

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <link rel="Verknüpfungssymbol" href="%PUBLIC_URL%/favicon.ico" rel="externes Nofollow" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1" />
    <meta name="Themenfarbe" content="#000000" />
    <!-- CSS importieren -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="externes Nofollow" Integrität="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonym">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="externes Nofollow" />
    <title>React-Datei-Uploader</title>
  </Kopf>
  <Text>
    <noscript>Sie müssen JavaScript aktivieren, um diese App auszuführen.</noscript>
    <div id="Wurzel"></div>
    <!-- js importieren -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Komponenten schreiben

Wir müssen insgesamt 3 Komponenten schreiben, nämlich

  • FileUpload.js: Verwenden Sie die Formular-Tags onSubmit und axios, um eine Upload-Anfrage zu senden
  • Message.js: Zeigt Informationen über erfolgreichen Upload, Serverfehler oder keine ausgewählte Datei an
  • Progress.js: Upload-Fortschrittsbalken mit onUploadProgress und Bootstrap von Axios anzeigen

Dateiupload

importiere React, { useState } von 'react'
Axios von „Axios“ importieren
Nachricht aus './Message' importieren
Importiere Fortschritt aus „./Progress“

const FileUpload = () => {

  zurückkehren (
    <div>
      {Nachricht ? <Nachricht msg={Nachricht} /> : null}
      <form onSubmit={onSubmit}>
        <div Klassenname="benutzerdefinierte Datei mb-4">
          <input Typ="Datei" Klassenname="custom-file-input" ID="customFile" onChange={onChange}></input>
          <label className="custom-file-label" htmlFor="customFile">{Dateiname}</label>
        </div>
        <Fortschritt in Prozent={uploadedPercentage}></Fortschritt>
        <input className="btn btn-primary btn-block mt-4" type="submit" value="Hochladen"></input>
      </form>
      {
        hochgeladeneDatei? 
          <div Klassenname="Zeile mt-5">
            <div Klassenname = "col-md-6 m-auto">
              <h3 className="text-center">{hochgeladeneDatei.name}</h3>
              <img style={{width:'100%'}} src={uploadedFile.filePath} alt=""></img>
            </div>
          </div> :
          <p>Noch nichts hochgeladen...</p>
      }
    </div>
  )
}
Standardmäßig exportieren Datei hochladen

Nachricht.js

React von „react“ importieren
Importiere PropTypes aus „Prop-Types“

const Nachricht = ({msg}) => {
  console.log('sie')
  zurückkehren (
    <div Klassenname = "Alarm Alarm-Info Alarm-abweisbar Ausblenden Anzeigen" Rolle = "Alarm">
      {msg}
      <button type="button" className="close" data-dismiss="alert" aria-label="Schließen">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  )
}
Nachricht.propTypes = {
  Nachricht: PropTypes.string.isterforderlich,
}
Standardnachricht exportieren

Fortschritt.js

React von „react“ importieren
Importiere PropTypes aus „Prop-Types“

const Fortschritt = ({Prozent}) => {
  zurückkehren (
    <div Klassenname = "Fortschritt">
      <div Klassenname = "Fortschrittsbalken" Rolle = "Fortschrittsbalken" 
        Stil = {{ Breite: `${Prozent}%` }} 
        aria-valuenow={Prozent} aria-valuemin="0" aria-valuemax="100">{Prozent}%</div>
    </div>
  )
}
Fortschritt.propTypes = {
  Prozentsatz: PropTypes.number.isRequired,
}
Export-Standardfortschritt

prüfen

Bisher sind alle Funktionskomponenten fertiggestellt.

npm-Ausführung dev

Zum Schluss fügen Sie die Git-Adresse Git an

Dies ist das Ende dieses Artikels über die Verwendung der Express-Fileupload-Middleware in node.js zum Hochladen von Dateien. Weitere verwandte Inhalte zum Hochladen von node.js-Dateien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js
  • JavaScript mit Ckeditor + Ckfinder - detaillierte Erläuterung zum Hochladen von Dateien
  • jQuery implementiert asynchronen Dateiupload ajaxfileupload.js
  • Backend-Codebeispiel für den Upload großer Dateien basierend auf JavaScript
  • JS kann den Datei-Upload mit Unterbrechungspunkten fortsetzen, um eine Code-Analyse zu erreichen
  • Die FormData-Klasse in JS implementiert den Dateiupload
  • Die FileReader-Klasse in JS implementiert die Funktion der zeitnahen Vorschau des Datei-Uploads
  • js zum Implementieren von Details im Datei-Upload-Stil

<<:  Eine kurze Analyse von Linux, um den Firewall-Status und den Status der für die Außenwelt geöffneten Ports zu überprüfen

>>:  Detaillierte Erläuterung der MySQL-Benutzer- und Berechtigungsverwaltung

Artikel empfehlen

So kopieren Sie eine MySQL-Tabelle

Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...

Die umfassendste Erklärung des Sperrmechanismus in MySQL

Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...

Detaillierte Erklärung der Mencached-Cache-Konfiguration basierend auf Nginx

Einführung Memcached ist ein verteiltes Caching-S...

Detaillierte Erläuterung der kombinierten MySQL-Indexmethode

Für jedes DBMS sind die Indizes der wichtigste Op...

MySQL-Export ganzer oder einzelner Tabellendaten

Exportieren einer einzelnen Tabelle mysqldump -u ...

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen

Während der Projektentwicklung bin ich gestern auf...

So stellen Sie versehentlich gelöschte Tabellendaten in MySQL wieder her (unbedingt lesen)

Wenn ein Backup vorhanden ist, ist es ganz einfac...

Der Unterschied zwischen useEffect und useLayoutEffect in React

Inhaltsverzeichnis Voraussetzungen Effekt verwend...

Detaillierte Erklärung, wo Docker Protokolldateien speichert

Inhaltsverzeichnis Wo werden die Protokolle gespe...

So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework

Was ist ORM? ORM steht für Object Relational Mapp...

MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse

1. Einleitung MDL-Sperren in MySQL haben schon im...

vue + springboot realisiert den Login-Bestätigungscode

In diesem Artikelbeispiel wird der spezifische Co...

Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

1. Grundlegende Verwendung <!DOCTYPE html> ...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Die untergeordnete Iframe-Seite betreibt die übergeordnete Seite und implementiert den Effekt der Abschirmung der Seiten-Popup-Ebene

Frage: In index.html führt iframe son.html ein. Wi...