Upload-Komponentenfunktion basierend auf React-Dropzone entwickeln (Beispieldemonstration)

importiere React, { 
    verwendenState, 
    benutzeCallback,
    Effekt verwenden,
} von „reagieren“;
importiere {useDropzone} aus „react-dropzone“;
importiere "./dropzone.styles.css"
importiere InfiniteScroll von „react-infinite-scroller“;
importieren {
    Liste,
    Nachricht,
    // Benutzerbild,
    Drehen,
} von „antd“;
importiere Axios von „Axios“;

/**
* Dateigröße berechnen * @param {*} Bytes 
* @param {*} Dezimalstellen 
* @returns 
*/
Funktion formatBytes(Bytes, Dezimalstellen = 2) {
    wenn (Bytes === 0) returniere „0 Bytes“;

    konstant k = 1024;
    const dm = Dezimalstellen < 0? 0: Dezimalstellen;
    Konstantengrößen = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    const i = Math.floor(Math.log(bytes) / Math.log(k));

    returniere parseFloat((Bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + Größen[i];
}

/**
* Dropzone-Upload-Datei * @param {*} Eigenschaften 
* @returns 
*/
Funktion DropzoneUpload(Eigenschaften) {
    const [Dateien, setFiles] = useState([])
    const [wird geladen, wird gesetzt] = useState(false);
    const [hasMore, setHasMore] = useState(true);

    const onDrop = useCallback(akzeptierte Dateien => {
        setzeLaden(true);
        const formData = new FormData();
        smallFiles.forEach(Datei => {
            formData.append("Dateien", Datei);
        });
        axios({
            Methode: 'POST',
            URL: '/api/files/mehrereDateien',
            Daten: Formulardaten,
            Überschriften: {
                "Inhaltstyp": "multipart/Formulardaten",
            }
        })
        dann(bzw => {
            Dateien hinzufügen(akzeptierte Dateien);
            setzeLaden(false);
        });
    }, [Dateien]);

    // Dropzone-Einstellung
    const { getRootProps, getInputProps } = useDropzone({
        mehrere:wahr,
        beim Ablegen,
    });

    // Anhang löschen const removeFile = file => {
        const newFiles = [...Dateien]
        newFiles.splice(newFiles.indexOf(Datei), 1)
        setFiles(neueDateien)
    }

    useEffect(() => {
        // Uploader-Dateien initialisieren
        setFiles([])
    },[])

    zurückkehren (
        <Abschnitt Klassenname="Container">
        <div {...getRootProps({className: 'dropzone'})}>
            <input { ...getInputProps()} />
            <p>Ziehen Sie Dateien oder klicken Sie, um Dateien auszuwählen😊</p>
        </div>
        
        <div Klassenname="demo-unendlich-container">
            <UnendlicheScroll
                initialLoad={false}
                pageStart={0}
                loadMore={handleInfiniteOnLoad}
                hatMehr={!wird geladen && hatMehr}
                useWindow= {false}
            >
                <Liste
                    dataSource={Dateien}
                    renderItem={item=> (
                        <Liste.Element 
                            Aktionen={[
                                // <a key="list-loadmore-edit">Bearbeiten</a>, 
                                <a key="list-loadmore-delete" onClick={removeFile}>Löschen</a>
                            ]}
                            //extra={
                                
                            // }
                            Schlüssel={item.path}>
                            <Liste.Element.Meta 
                                avatar={
                                    <>
                                    {
                                        !!Artikeltyp && ['Bild/gif', 'Bild/jpeg', 'Bild/png'].includes(Artikeltyp) &&
                                        <Bild 
                                            Breite={100}
                                            alt='Logo'
                                            src={item.preview}
                                        />
                                    }
                                    </>
                                }
                                Titel={item.path}
                                Beschreibung={formatBytes(Artikelgröße)}
                            />
                        </Liste.Element>
                    )}
                >
                    {wird geladen && hat mehr && (
                        <div Klassenname="Demo-Ladecontainer">
                            <Drehen />
                        </div>
                    )}
                </Liste>
            </InfiniteScroll>
        </div>
        </Abschnitt>
    );
}

def mehrere Dateien():
wenn „Dateien“ nicht in request.files enthalten sind:
    return jsonify({'message': 'Keine Datei!'}), 200
Dateien = Anfrage.Dateien.getlist('Dateien')

für Datei in Dateien:
    if Datei:
        # Lösen Sie das chinesische Problem des sicheren Dateinamens durch Pinyin. Dateiname = sicherer Dateiname (''.join (lazy_pinyin (file.filename))
        Pfad(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(Eltern=True, exist_ok=True)
        file.speichern(os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], Dateiname))

return jsonify({'message': 'Erfolgreich gespeichert! !'})

const promiseArray = largeFiles.map(file => neues Promise((auflösen, ablehnen) => {
                        
    const chunkSize = CHUNK_SIZE;
    const chunks = Math.ceil(Dateigröße / Chunkgröße);
    lass chunk = 0;
    Lassen Sie chunkArray = neues Array();
    während (Block <= Blöcke) {
        let offset = chunk * chunkGröße;
        let slice = Datei.slice(Offset, Offset+Blockgröße)
        chunkArray.push([Scheibe, Versatz])
        ++Stück;
    }
    const chunkUploadPromises = (Schnitt, Offset) => {
        const largeFileData = neue FormData();
        largeFileData.append('largeFileData', Scheibe)
        returniere neues Promise((lösen, ablehnen) => {
            axios({
                Methode: 'POST',
                URL: '/api/files/largefile',
                Daten: largeFileData,
                Überschriften: {
                    "Inhaltstyp": "multipart/Formulardaten"
                }
            })
            .then(resp => {
                konsole.log(resp);
                auflösen (bzw.);
            })
            .catch(err => {
                ablehnen(fehler);
            })
        })
    };

    chunkArray.reduce( (vorheriges Versprechen, [nächsterChunk, nächsterOffset]) => {
        returniere vorherigesVersprechen.dann(() => {
            gibt chunkUploadPromises(nextChunk, nextOffset) zurück;
        });
    }, Versprechen.auflösen());
    lösen();
}))

Dateiname = sicherer_Dateiname(''.join(lazy_pinyin(Dateiname)))
Pfad(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(Eltern=True, exist_ok=True)
save_path = os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], Dateiname)
versuchen:
    mit open(save_path, 'ab') als f:
        f.seek(Versatz)
        f.schreiben(Datei.Stream.lesen())
        drucken("Zeit: " + str(datetime.now()) + " Offset: " + str(offset))
außer OSError:
    return jsonify({'Konnte nicht in Datei schreiben'}), 500