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

Inhaltsverzeichnis

Initialisieren des Projekts
Schreiben des Servers
Initialisieren des Clients
Komponenten schreiben

Dateiupload
Nachricht.js
Fortschritt.js

prüfen

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

Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen

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

Inhaltsverzeichnis

Initialisieren des Projekts

Schreiben des Servers

Initialisieren des Clients

Komponenten schreiben

Dateiupload

Nachricht.js

Fortschritt.js

prüfen

Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen

Implementierung eines einfachen Rechners mit Javascript

Informationen zur Installationsmethode für MySQL 8.0.13-ZIP-Pakete

Implementierung der kontinuierlichen Integration von Jenkins+Docker

Detaillierte Erklärung der Rolle statischer Variablen in MySQL

Tutorial zur Installation von MYSQL8.0 auf Alibaba Cloud ESC

So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei

Detaillierte Erläuterung der perfekten Integrationslösung zwischen Serv-U FTP und AD

Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren

Dynamische Vue-Komponente

Artikel empfehlen

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch

Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS

HTML als Startseite festlegen und zu Favoriten hinzufügen_Powernode Java Academy

So schreiben Sie hochwertigen JavaScript-Code

Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.17 (Windows 10)

Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

Django verwendet Pillow, um einfach eine Verifizierungscodefunktion einzurichten (Python)

ICO-Spiegelcode zu HTML hinzufügen (favicon.ico wird im Stammverzeichnis abgelegt)

So legen Sie eine horizontale Navigationsstruktur in HTML fest

Lösung für den ONLY_FULL_GROUP_BY-Fehler in Mysql5.7 und höher

Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS

Schritte zum Einrichten und Mounten freigegebener Ordner auf Windows-Host und Docker-Container

Eine vollständige Anleitung zur Docker-Befehlszeile (18 Dinge, die Sie wissen müssen)

Tutorial zur Installation von MySQL auf Alibaba Cloud Centos 7.5