React-Beispiel, das den Fortschritt des Datei-Uploads zeigt

Stellen Sie sicher, dass Sie eine Node-Umgebung haben npx create-react-app my-app //Erstellen Sie die Datei my-app im aktuellen Ordner cd my-app //Geben Sie das Verzeichnis ein npm install antd //Installieren Sie die Antd-UI-Komponente npm run start //Starten Sie das Projekt

importiere React von „react“;
importiere „antd/dist/antd.css“;
importiere { Upload, Nachricht, Button, Fortschritt } von 'antd';
importiere { UploadOutlined } von '@ant-design/icons';

Axios von „Axios“ importieren
axios.defaults.withCredentials = wahr

Klasse App erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Dateiliste: [],
      Hochladen: falsch,
      Dateigröße: 0,
      Baifenbi: 0
    }
  }
  //Wenn sich der Dateiupload ändert, configs = {
    Header: { 'Inhaltstyp': 'multipart/form-data' },
    mit Anmeldeinformationen: true,
    onUploadProgress: (Fortschritt) => {
      console.log(Fortschritt);
      let { geladen } = Fortschritt
      let { Dateigröße } = dieser.Zustand
      console.log(geladen, Dateigröße);
      let baifenbi = (geladen / Dateigröße * 100).toFixed(2)
      dies.setState({
        Abonnieren
      })
    }
  }
  //Klicken zum Hochladen handleUpload = () => {
    const { Dateiliste } = dieser.Zustand;
    const formData = new FormData();
    fileList.forEach(Datei => {
      formData.append('files[]', Datei);
    });
    dies.setState({
      hochladen: wahr,
    });
    //Lokalen Dienst anfordern axios.post("http://127.0.0.1:5000/upload", formData, this.configs).then(res => {
      dies.setState({
        Preis: 100,
        Hochladen: falsch,
        Dateiliste: []
      })
    }).schließlich(log => {
      konsole.log(log);
    })
  }
  bei Änderung = (Info) => {
    if (info.file.status !== 'Hochladen') {
      dies.setState({
        Dateigröße: info.Dateigröße,
        Baifenbi: 0
      })
    }
    wenn (info.file.status === 'erledigt') {
      message.success(`Datei ${info.file.name} erfolgreich hochgeladen`);
    } sonst wenn (info.file.status === 'Fehler') {
      message.error(`Hochladen der Datei ${info.file.name} fehlgeschlagen.`);
    }
  }


  rendern() {
    const { Hochladen, Dateiliste } = dieser.Status;
    const props = {
      beim Entfernen: Datei => {
        dies.setState(state => {
          const index = status.fileList.indexOf(Datei);
          const newFileList = state.fileList.slice();
          neueDateiliste.splice(index, 1);
          zurückkehren {
            Dateiliste: neueDateiliste,
          };
        });
      },
      vor dem Hochladen: Datei => {
        this.setState(state => ({
          Dateiliste: [...status.Dateiliste, Datei],
        }));
        gibt false zurück;
      },
      Dateiliste,
    };
    zurückkehren (
      <div Stil = {{ Breite: "80 %", Rand: "auto", Polsterung: 20 }}>
        <h2>{dieser.zustand.baifenbi + '%'}</h2>
        <Hochladen bei Änderung={(e) => { this.onchange(e) }} {...props}>
          <Schaltfläche>
            <UploadOutlined /> Zum Hochladen klicken
          </Button>
        </Hochladen>
        <Schaltfläche
          Typ="primär"
          bei Klick={this.handleUpload}
          deaktiviert={fileList.length === 0}
          wird geladen={Hochladen}
          Stil={{ marginTop: 16 }}
        >
          {Hochladen? 'Hochladen': 'Upload starten'}
        </Button>
        <Fortschritt Stil={{ marginTop: 20 }} Status={this.state.baifenbi !== 0 ? 'Erfolg' : ''} Prozent={this.state.baifenbi}></Fortschritt>
      </div>
    )
  }
}

Standard-App exportieren;

1. Erstellen Sie zuerst den Ordner webSever
  cd webServer
  npm -init -y //Datei package.json erstellen 2. Express und die für den Dateiupload erforderlichen Pakete installieren npm install express multer ejs

3. Erstellen Sie app.js

var express = erforderlich('express');
var app = express();
var Pfad = erforderlich('Pfad');
var fs = erfordern('fs')
var multer = require('multer')
//Domänenübergreifenden Zugriff einrichten app.all("*", function (req, res, next) {
    //Legen Sie den Domänennamen fest, der domänenübergreifend sein darf. * bedeutet, dass jedem Domänennamen das domänenübergreifende Benutzen gestattet ist. res.header("Access-Control-Allow-Origin", req.headers.origin || '*');
    // //Erlaubte Header-Typen res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
    // //Domänenübergreifend zulässige Anforderungsmethodenres.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    // Cookies sind erlaubt
    res.header("Zugriffskontrolle-Anmeldeinformationen zulassen", true);
    if (req.method == 'OPTIONEN') {
        res.sendStatus(200);
    } anders {
        nächste();
    }
})


app.use(express.static(Pfad.join(__dirname, 'public')));
//Vorlagen-Engine app.set('views', path.join(__dirname, 'views'));
app.set('Ansichts-Engine', 'ejs');

app.get("/", (req, res, next) => {
    res.render("index")
})
//Dateien hochladen app.post('/upload', (req, res, next) => {

    var upload = multer({ dest: 'upload/' }).any();
  
    hochladen(erf, res, err => {
      wenn (Fehler) {
        console.log(fehler);
        zurückkehren
      }
      let Datei = req.files[0]
      let filname = datei.originalname
      var alterPfad = Datei.Pfad
      var neuerPfad = Pfad.beitreten(Prozess.cwd(), "upload/" + neues Date().getTime()+Dateiname)
      var src = fs.createReadStream(alterPfad);
      var dest = fs.createWriteStream(neuer Pfad);
      src.pipe(Ziel);
      src.on("Ende", () => {
        let filepath = Pfad.join(Prozess.cwd(), alterPfad)
        fs.unlink(Dateipfad, err => {
          wenn (Fehler) {
            console.log(fehler);
            zurückkehren
          }
          res.send("ok")
        })
  
      })
      src.on("Fehler", err => {
        res.end("err")
      })
  
    })
  
  })
  

app.use((req, res) => {
    res.send("404")
})
app.listen(5000)