Python 开发篇——基于 React-Dropzone 开发上传组件

import React, {     useState,     useCallback,    useEffect,} from 'react';import {useDropzone} from 'react-dropzone';import "./dropzone.styles.css"import InfiniteScroll from 'react-infinite-scroller';import {    List,    message,    // Avatar,    Spin,} from 'antd';import axios from 'axios';
/*** 计算文件大小* @param {*} bytes * @param {*} decimals * @returns */function formatBytes(bytes, decimals = 2) {    if (bytes === 0) return '0 Bytes';
    const k = 1024;    const dm = decimals < 0 ? 0 : decimals;    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];}
/*** Dropzone 上传文件* @param {*} props * @returns */function DropzoneUpload(props) {    const [files, setFiles] = useState([])    const [loading, setLoading] = useState(false);    const [hasMore, setHasMore] = useState(true);
    const onDrop = useCallback(acceptedFiles => {        setLoading(true);        const formData = new FormData();        smallFiles.forEach(file => {            formData.append("files", file);        });        axios({            method: 'POST',            url: '/api/files/multiplefiles',            data: formData,            headers: {                "Content-Type": "multipart/form-data",            }        })        then(resp => {            addFiles(acceptedFiles);            setLoading(false);        });    }, [files]);
    // Dropzone setting    const { getRootProps, getInputProps } = useDropzone({        multiple:true,        onDrop,    });
    // 删除附件    const removeFile = file => {        const newFiles = [...files]        newFiles.splice(newFiles.indexOf(file), 1)        setFiles(newFiles)    }
    useEffect(() => {        // init uploader files        setFiles([])    },[])
    return (        <section className="container">        <div {...getRootProps({className: 'dropzone'})}>            <input {...getInputProps()} />            <p>拖动文件或点击选择文件😊</p>        </div>                <div className="demo-infinite-container">            <InfiniteScroll                initialLoad={false}                pageStart={0}                loadMore={handleInfiniteOnLoad}                hasMore={!loading && hasMore}                useWindow= {false}            >                <List                    dataSource={files}                    renderItem={item=> (                        <List.Item                             actions={[                                // <a key="list-loadmore-edit">编辑</a>,                                 <a key="list-loadmore-delete" onClick={removeFile}>删除</a>                            ]}                            // extra={                                                            // }                            key={item.path}>                            <List.Item.Meta                                 avatar={                                    <>                                    {                                        !!item.type && ['image/gif', 'image/jpeg', 'image/png'].includes(item.type) &&                                        <img                                             width={100}                                            alt='logo'                                            src={item.preview}                                        />                                    }                                    </>                                }                                title={item.path}                                description={formatBytes(item.size)}                            />                        </List.Item>                    )}                >                    {loading && hasMore && (                        <div className="demo-loading-container">                            <Spin />                        </div>                    )}                </List>            </InfiniteScroll>        </div>        </section>    );}

def multiplefiles():if 'files' not in request.files:    return jsonify({'message': '没有文件！'}), 200files = request.files.getlist('files')
for file in files:    if file:        # 通过拼音解决secure_filename中文问题        filename = secure_filename(''.join(lazy_pinyin(file.filename))        Path(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, exist_ok=True)        file.save(os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], filename))
return jsonify({'message': '保存成功！！'})

const promiseArray = largeFiles.map(file => new Promise((resolve, reject) => {                            const chunkSize = CHUNK_SIZE;    const chunks = Math.ceil(file.size / chunkSize);    let chunk = 0;    let chunkArray = new Array();    while (chunk <= chunks) {        let offset = chunk * chunkSize;        let slice = file.slice(offset, offset+chunkSize)        chunkArray.push([slice, offset])        ++chunk;    }    const chunkUploadPromises = (slice, offset) => {        const largeFileData = new FormData();        largeFileData.append('largeFileData', slice)        return new Promise((resolve, reject) => {            axios({                method: 'POST',                url: '/api/files/largefile',                data: largeFileData,                headers: {                    "Content-Type": "multipart/form-data"                }            })            .then(resp => {                console.log(resp);                resolve(resp);            })            .catch(err => {                reject(err);            })        })    };
    chunkArray.reduce( (previousPromise, [nextChunk, nextOffset]) => {        return previousPromise.then(() => {            return chunkUploadPromises(nextChunk, nextOffset);        });    }, Promise.resolve());    resolve();}))

filename = secure_filename(''.join(lazy_pinyin(filename)))Path(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, exist_ok=True)save_path = os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], filename)try:    with open(save_path, 'ab') as f:        f.seek(offset)        f.write(file.stream.read())        print("time： "+ str(datetime.now())+" offset: " + str(offset))except  OSError:    return jsonify({'Could not write to file'}), 500