So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js

lass Instanz = axios.create();
Instanz.defaults.baseURL = "http://127.0.0.1:8888";
instance.defaults.headers['Inhaltstyp'] = 'multipart/Formulardaten';
instance.defaults.transformRequest = (Daten, Header) => {
    const contentType = headers['Inhaltstyp'];
    wenn (contentType === "application/x-www-form-urlencoded") return Qs.stringify(data);
    Daten zurückgeben;
};
Instanz.Interceptors.Response.Verwenden(Antwort => {
    Antwortdaten zurückgeben;
});

 //Front-End-Code// Zeigt hauptsächlich den Kerncode zum Hochladen basierend auf ForData upload_button_upload.addEventListener('click', function () {
            wenn (upload_button_upload.classList.contains('deaktivieren') || upload_button_upload.classList.contains('wird geladen')) return;
            wenn (!_Datei) {
                alert('Bitte wählen Sie zuerst die hochzuladende Datei aus~~');
                zurückkehren;
            }
            ändereDeaktivieren(true);
            // Übergebe die Datei an den Server: FormData
            let formData = neue FormData();
            //Felder entsprechend den Hintergrundanforderungen hinzufügen formData.append('file', _file);
            formData.append('Dateiname', _Datei.name);
            Instanz.post('/upload_single', formData).then(data => {
                wenn (+data.code === 0) {
                    alert(`Die Datei wurde erfolgreich hochgeladen~~, Sie können basierend auf ${data.servicePath}~~ auf diese Ressource zugreifen`);
                    zurückkehren;
                }
                gibt Promise.reject(data.codeText) zurück;
            }).catch(Grund => {
                alert('Dateiupload fehlgeschlagen, bitte versuchen Sie es später erneut~~');
            }).schließlich(() => {
                Handle löschen();
                ändereDeaktivieren(false);
            });
        });

export changeBASE64(Datei) => {
   gib ein neues Versprechen zurück (Auflösen => {
    Fügt eine neue Funktion zum Lesen von Dateien hinzu.
    fileReader.readAsDataURL(Datei);
    fileReader.onload = ev => {
        lösen(ev.target.result);
    };
  });
};

upload_inp.addEventListener('ändern', asynchrone Funktion () {
        let Datei = upload_inp.files[0],
            BASE64,
            Daten;
        wenn (!Datei) zurückgeben;
        if (Dateigröße > 2 * 1024 * 1024) {
            alert('Die hochgeladene Datei darf nicht größer als 2 MB sein~~');
            zurückkehren;
        }
        upload_button_select.classList.add('wird geladen');
        // Base64 abrufen
        BASE64 = warte auf changeBASE64(Datei);
        versuchen {
            Daten = warte auf Instanz.Post('/upload_single_base64', {
            // encodeURIComponent (BASE64) verhindert, dass Sonderzeichen während der Übertragung verstümmelt werden. Gleichzeitig muss das Backend decodeURIComponent verwenden, um die Datei zu dekodieren: encodeURIComponent (BASE64),
                Dateiname: datei.name
            }, {
                Überschriften: {
                    „Inhaltstyp“: „Anwendung/x-www-form-urlencoded“
                }
            });
            wenn (+data.code === 0) {
                alert(`Herzlichen Glückwunsch, die Datei wurde erfolgreich hochgeladen. Sie können über die Adresse ${data.servicePath} darauf zugreifen~~`);
                zurückkehren;
            }
            wirf Daten.CodeText;
        } fangen (Fehler) {
            alert('Leider ist der Dateiupload fehlgeschlagen. Bitte versuchen Sie es später erneut~~');
        Endlich
            upload_button_select.classList.remove('wird geladen');
        }
    **});**

const changeBuffer = Datei => {
    gib ein neues Versprechen zurück (Auflösen => {
        Fügt eine neue Funktion zum Lesen von Dateien hinzu.
        fileReader.readAsArrayBuffer(Datei);
        fileReader.onload = ev => {
            lass Puffer = ev.target.result,
                Funke = neuer SparkMD5.ArrayBuffer(),
                HASCH,
                Suffix;
            spark.append(Puffer);
            // Dateinamen abrufen HASH = spark.end();
            // Suffixnamen abrufen suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1];
            lösen({
                Puffer,
                HASCH,
                Suffix,
                Dateiname: `${HASH}.${suffix}`
            });
        };
    });
  };

upload_button_upload.addEventListener('klicken', asynchrone Funktion () {
        wenn (checkIsDisable(this)) zurückgeben;
        wenn (!_Datei) {
            alert('Bitte wählen Sie zuerst die hochzuladende Datei aus~~');
            zurückkehren;
        }
        ändereDeaktivieren(true);
        // Generiere den HASH-Namen der Datei let {
            Dateiname
        } = warte auf changeBuffer(_file);
        let formData = neue FormData();
        formData.append('Datei', _Datei);
        formData.append('Dateiname', Dateiname);
        Instanz.post('/upload_einzelner_name', formData).then(data => {
            wenn (+data.code === 0) {
                alert(`Die Datei wurde erfolgreich hochgeladen~~, Sie können basierend auf ${data.servicePath}~~ auf diese Ressource zugreifen`);
                zurückkehren;
            }
            gibt Promise.reject(data.codeText) zurück;
        }).catch(Grund => {
            alert('Dateiupload fehlgeschlagen, bitte versuchen Sie es später erneut~~');
        }).schließlich(() => {
            ändereDeaktivieren(false);
            upload_abbre.style.display = "keine";
            upload_abbre_img.src = '';
            _Datei = null;
        });
    });

(Funktion () {
    let upload = document.querySelector('#upload4'),
        upload_inp = upload.querySelector('.upload_inp'),
        upload_button_select = upload.querySelector('.upload_button.select'),
        upload_progress = upload.querySelector('.upload_progress'),
        upload_progress_value = upload_progress.querySelector('.value');

    // Überprüfen, ob es in einem betriebsfähigen Zustand ist const checkIsDisable = element => {
        Lassen Sie Klassenliste = Element.Klassenliste;
        return classList.contains('deaktivieren') || classList.contains('wird geladen');
    };

    upload_inp.addEventListener('ändern', asynchrone Funktion () {
        let Datei = upload_inp.files[0],
            Daten;
        wenn (!Datei) zurückgeben;
        upload_button_select.classList.add('wird geladen');
        versuchen {
            let formData = neue FormData();
            formData.append('Datei', Datei);
            formData.append('Dateiname', Dateiname);
            Daten = warte auf Instanz.Post('/upload_single', formData, {
                //Rückruffunktion xhr.upload.onprogress beim Dateiupload
                beimUploadProgress(ev) {
                    lassen {
                        geladen,
                        gesamt
                    } = ev;
                    upload_progress.style.display = "Block";
                    upload_progress_value.style.width = `${geladen/gesamt*100} %`;
                }
            });
            wenn (+data.code === 0) {
                upload_progress_value.style.width = `100%`;
                alert(`Herzlichen Glückwunsch, die Datei wurde erfolgreich hochgeladen. Sie können über ${data.servicePath}~~ auf die Datei zugreifen`);
                zurückkehren;
            }
            wirf Daten.CodeText;
        } fangen (Fehler) {
            alert('Leider ist der Dateiupload fehlgeschlagen. Bitte versuchen Sie es später erneut~~');
        Endlich
            upload_button_select.classList.remove('wird geladen');
            upload_progress.style.display = "keine";
            upload_progress_value.style.width = `0%`;
        }
    });

    upload_button_select.addEventListener('klicken', Funktion () {
        wenn (checkIsDisable(this)) zurückgeben;
        upload_inp.click();
    });
})();

// Implementieren Sie die Datei-Slicing-Verarbeitung „feste Zahl und feste Größe“
sei max = 1024 * 100,
    Anzahl = Math.ceil(Dateigröße / max),
    Index = 0,
    Stücke = [];
wenn (Anzahl > 100) {
    max = Dateigröße / 100;
    Anzahl = 100;
}
während (Index < Anzahl) {
    Stücke.push({
    // Die Datei selbst hat eine Slice-Methode, siehe folgende Abbildung Datei: file.slice(index * max, (index + 1) * max),
        Dateiname: `${HASH}_${index+1}.${suffix}`
    });
    Index++;
}

chunks.fürJeden(chunk => {
    let fm = neue Formulardaten;
    fm.append('Datei', chunk.datei);
    fm.append('Dateiname', chunk.Dateiname);
    Instanz.post('/upload_chunk', fm).dann(data => {
        wenn (+data.code === 0) {
            vervollständigen();
            zurückkehren;
        }
        gibt Promise.reject(data.codeText) zurück;
    }).catch(() => {
        alert('Der aktuelle Slice-Upload ist fehlgeschlagen. Bitte versuchen Sie es später erneut~~');
        klar();
    });
   });

    upload_inp.addEventListener('ändern', asynchrone Funktion () {
        let Datei = upload_inp.files[0];
        wenn (!Datei) zurückgeben;
        upload_button_select.classList.add('wird geladen');
        upload_progress.style.display = "Block";

        // Den HASH der Datei abrufen
        lass schon = [],
            Daten = null,
            {
                HASCH,
                Suffix
            } = warte auf changeBuffer(Datei);

        // Informationen zum hochgeladenen Slice abrufen try {
            Daten = warte auf Instanz.get('/upload_already', {
                Parameter: {
                    HASCH
                }
            });
            wenn (+data.code === 0) {
                bereits = Daten.Dateiliste;
            }
        } fangen (Fehler) {}

        // Implementieren Sie die Datei-Slicing-Verarbeitung „feste Zahl und feste Größe“
        sei max = 1024 * 100,
            Anzahl = Math.ceil(Dateigröße / max),
            Index = 0,
            Stücke = [];
        wenn (Anzahl > 100) {
            max = Dateigröße / 100;
            Anzahl = 100;
        }
        während (Index < Anzahl) {
            Stücke.push({
                Datei: Datei.Slice(Index * max, (Index + 1) * max),
                Dateiname: `${HASH}_${index+1}.${suffix}`
            });
            Index++;
        }

        // Upload-Verarbeitung erfolgreich. Index = 0;
        const löschen = () => {
            upload_button_select.classList.remove('wird geladen');
            upload_progress.style.display = "keine";
            upload_progress_value.style.width = "0%";
        };
        const complate = async () => {
            //Fortschrittsbalken steuern index++;
            upload_progress_value.style.width = `${index/count*100}%`;

            // Wenn alle Slices erfolgreich hochgeladen wurden, führen wir die Slices zusammen, if (index < count) return;
            upload_progress_value.style.width = `100%`;
            versuchen {
                Daten = warte auf Instanz.Post('/upload_merge', {
                    HASCH,
                    zählen
                }, {
                    Überschriften: {
                        „Inhaltstyp“: „Anwendung/x-www-form-urlencoded“
                    }
                });
                wenn (+data.code === 0) {
                    alert(`Herzlichen Glückwunsch, die Datei wurde erfolgreich hochgeladen. Sie können über ${data.servicePath}~~ auf die Datei zugreifen`);
                    klar();
                    zurückkehren;
                }
                wirf Daten.CodeText;
            } fangen (Fehler) {
                alert('Das Zusammenführen der Slices ist fehlgeschlagen. Bitte versuchen Sie es später erneut~~');
                klar();
            }
        };

        // Lade jedes Slice auf den Server hoch chunks.forEach(chunk => {
            // Bereits hochgeladen, kein erneutes Hochladen nötig if (already.length > 0 && already.includes(chunk.filename)) {
                vervollständigen();
                zurückkehren;
            }
            let fm = neue Formulardaten;
            fm.append('Datei', chunk.datei);
            fm.append('Dateiname', chunk.Dateiname);
            Instanz.post('/upload_chunk', fm).dann(data => {
                wenn (+data.code === 0) {
                    vervollständigen();
                    zurückkehren;
                }
                gibt Promise.reject(data.codeText) zurück;
            }).catch(() => {
                alert('Der aktuelle Slice-Upload ist fehlgeschlagen. Bitte versuchen Sie es später erneut~~');
                klar();
            });
        });
    });

 // Große Dateisegmente hochladen und Segmente zusammenführen const merge = function merge(HASH, count) {
        returniere neues Promise(async (auflösen, ablehnen) => {
            let path = `${uploadDir}/${HASH}`,
                Dateiliste = [],
                Suffix,
                istExistiert;
            isExists = warte auf existiere(Pfad);
            wenn (!istExistiert) {
                reject('HASH-Pfad nicht gefunden!');
                zurückkehren;
            }
            fileList = fs.readdirSync(Pfad);
            if (Dateiliste.Länge < Anzahl) {
                reject('der Slice wurde nicht hochgeladen!');
                zurückkehren;
            }
            Dateiliste.sortieren((a, b) => {
                sei reg = /_(\d+)/;
                return reg.exec(a)[1] - reg.exec(b)[1];
            }).fürJedes(Element => {
                !Suffix ? Suffix = /\.([0-9a-zA-Z]+)$/.exec(item)[1] : null;
                fs.appendFileSync(`${uploadDir}/${HASH}.${suffix}`, fs.readFileSync(`${path}/${item}`));
                fs.unlinkSync(`${path}/${item}`);
            });
            fs.rmdirSync(Pfad);
            lösen({
                Pfad: `${uploadDir}/${HASH}.${suffix}`,
                Dateiname: `${HASH}.${suffix}`
            });
        });
    };
    app.post('/upload_chunk', async (req, res) => {
        versuchen {
            lassen {
                Felder,
                Dateien
            } = warte auf multiparty_upload(req);
            let file = (Dateien.Datei && Dateien.Datei[0]) || {},
                Dateiname = (Felder.Dateiname && Felder.Dateiname[0]) || "",
                Pfad = '',
                istExistiert = falsch;
            // Erstellen Sie ein temporäres Verzeichnis zum Speichern von Slices let [, HASH] = /^([^_]+)_(\d+)/.exec(filename);
            Pfad = `${uploadDir}/${HASH}`;
            !fs.existsSync(Pfad) ? fs.mkdirSync(Pfad) : null;
            // Speichern Sie den Slice in einem temporären Verzeichnispfad = `${uploadDir}/${HASH}/${filename}`;
            isExists = warte auf existiere(Pfad);
            wenn (istExistiert) {
                res.send({
                    Code: 0,
                    CodeText: 'Datei existiert',
                    originalFilename: Dateiname,
                    servicePath: Pfad.ersetzen(__dirname, HOSTNAME)
                });
                zurückkehren;
            }
            writeFile(res, Pfad, Datei, Dateiname, true);
        } fangen (Fehler) {
            res.send({
                Code: 1,
                CodeText: Fehler
            });
        }
    });
    app.post('/upload_merge', async (req, res) => {
        lassen {
            HASCH,
            zählen
        } = erforderlich.body;
        versuchen {
            lassen {
                Dateiname,
                Weg
            } = warte auf Zusammenführung (HASH, Anzahl);
            res.send({
                Code: 0,
                CodeText: „Zusammenführung erfolgreich“,
                originalFilename: Dateiname,
                servicePath: Pfad.ersetzen(__dirname, HOSTNAME)
            });
        } fangen (Fehler) {
            res.send({
                Code: 1,
                CodeText: Fehler
            });
        }
    });
    app.get('/upload_already', async (req, res) => {
        lassen {
            HASCH
        } = Anforderungsabfrage;
        let path = `${uploadDir}/${HASH}`,
            Dateiliste = [];
        versuchen {
            fileList = fs.readdirSync(Pfad);
            Dateiliste = Dateiliste.sort((a, b) => {
                sei reg = /_(\d+)/;
                return reg.exec(a)[1] - reg.exec(b)[1];
            });
            res.send({
                Code: 0,
                Codetext: '',
                Dateiliste: Dateiliste
            });
        } fangen (Fehler) {
            res.send({
                Code: 0,
                CodeText: '',
                Dateiliste: Dateiliste
            });
        }
    });