React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

Reactをインポートします。 
    使用状態、 
    コールバックの使用、
    使用効果、
} を 'react' から取得します。
'react-dropzone' から {useDropzone} をインポートします。
「./dropzone.styles.css」をインポートします
'react-infinite-scroller' から InfiniteScroll をインポートします。
輸入 {
    リスト、
    メッセージ、
    // アバター、
    スピン、
} 'antd' から;
'axios' から axios をインポートします。

/**
* ファイルサイズを計算 * @param {*} バイト 
* @param {*} 小数点 
* @戻り値 
*/
関数formatBytes(バイト、小数点数 = 2) {
    if (bytes === 0) は '0 バイト' を返します。

    定数k = 1024;
    const dm = 小数点 < 0 ? 0 : 小数点;
    const sizes = ['バイト', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

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

    parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i] を返します。
}

/**
* ドロップゾーンアップロードファイル * @param {*} props 
* @戻り値 
*/
関数 DropzoneUpload(props) {
    const [ファイル、setFiles] = useState([])
    const [ロード中、setLoading] = useState(false);
    const [hasMore, setHasMore] = useState(true);

    const onDrop = useCallback(acceptedFiles => {
        読み込みをtrueに設定します。
        フォームデータを作成します。
        smallFiles.forEach(ファイル => {
            formData.append("files", ファイル);
        });
        アクシオス({
            メソッド: 'POST'、
            url: '/api/files/multiplefiles',
            データ: フォームデータ、
            ヘッダー: {
                「コンテンツタイプ」: 「マルチパート/フォームデータ」、
            }
        })
        then(応答 => {
            ファイルを追加します(受け入れられたファイル)。
            読み込みを設定します(false);
        });
    }, [ファイル]);

    // ドロップゾーン設定
    const { getRootProps, getInputProps } = useDropzone({
        複数:true、
        オンドロップ、
    });

    // 添付ファイルを削除する const removeFile = file => {
        const newFiles = [...ファイル]
        newFiles.splice(newFiles.indexOf(ファイル), 1)
        setFiles(新しいファイル)
    }

    使用効果(() => {
        // アップローダーファイルの初期化
        ファイルセット([])
    },[])

    戻る （
        <セクションクラス名="コンテナ">
        <div {...getRootProps({className: 'dropzone'})}>
            <input { ...getInputProps()} />
            <p>ファイルをドラッグするかクリックしてファイルを選択してください😊</p>
        </div>
        
        <div className="デモ無限コンテナ">
            <無限スクロール
                初期ロード={false}
                ページ開始={0}
                loadMore={handleInfiniteOnLoad}
                hasMore={!読み込み中 && hasMore}
                useWindow={false} を使用します
            >
                <リスト
                    データソース={ファイル}
                    レンダリングアイテム={item=> (
                        <リスト.アイテム 
                            アクション={[
                                // <a key="list-loadmore-edit">編集</a>, 
                                <a key="list-loadmore-delete" onClick={removeFile}>削除</a>
                            ]}
                            //追加={
                                
                            // }
                            キー={アイテムパス}>
                            <リスト.アイテム.メタ 
                                アバター={
                                    <>
                                    {
                                        !!item.type && ['image/gif', 'image/jpeg', 'image/png'].includes(item.type) &&
                                        <画像 
                                            幅={100}
                                            alt='ロゴ'
                                            src={item.preview}
                                        />
                                    }
                                    </>
                                }
                                タイトル={item.path}
                                説明={formatBytes(item.size)}
                            />
                        </リスト.アイテム>
                    )}
                >
                    {読み込み中 && hasMore && (
                        <div className="デモ読み込みコンテナ">
                            <スピン />
                        </div>
                    )}
                </リスト>
            </無限スクロール>
        </div>
        </セクション>
    );
}

複数のファイルを定義する():
'files' が request.files にない場合:
    jsonify({'message': 'ファイルがありません!'}), 200 を返します
ファイル = request.files.getlist('ファイル')

ファイル内のファイルの場合:
    ファイルの場合:
        # secure_filename の中国語問題をピンインで解く filename = secure_filename(''.join(lazy_pinyin(file.filename))
        パス(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, existing_ok=True)
        file.save(os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], ファイル名))

return jsonify({'message': '保存に成功しました! !'})

const promiseArray = largeFiles.map(file => new Promise((resolve, deny) => {
                        
    定数チャンクサイズ = CHUNK_SIZE;
    const chunks = Math.ceil(file.size / chunkSize);
    チャンクを 0 にします。
    chunkArray = new Array() とします。
    while (チャンク <= チャンク) {
        offset = chunk * chunkSize とします。
        スライス = file.slice(オフセット、オフセット+チャンクサイズ)
        chunkArray.push([スライス, オフセット])
        ++チャンク;
    }
    const chunkUploadPromises = (スライス、オフセット) => {
        const largeFileData = 新しい FormData();
        largeFileData.append('largeFileData', スライス)
        新しい Promise を返します ((resolve, reject) => {
            アクシオス({
                メソッド: 'POST'、
                url: '/api/files/largefile',
                データ: largeFileData、
                ヘッダー: {
                    「コンテンツタイプ」: 「マルチパート/フォームデータ」
                }
            })
            .then(応答 => {
                コンソールログ(応答);
                解決する(応答);
            })
            .catch(エラー => {
                拒否(エラー);
            })
        })
    };

    chunkArray.reduce( (前のPromise、[次のChunk、次のOffset]) => {
        前のPromise.then(() => { を返します。
            chunkUploadPromises(nextChunk, nextOffset) を返します。
        });
    }, Promise.resolve());
    解決する（）;
}))

ファイル名 = secure_filename(''.join(lazy_pinyin(ファイル名)))
パス(UPLOAD_FOLDER + '/' + file_info['dir_path']).mkdir(parents=True, existing_ok=True)
save_path = os.path.join(UPLOAD_FOLDER + '/' + file_info['dir_path'], ファイル名)
試す：
    open(save_path, 'ab') を f として実行します:
        f.seek(オフセット)
        f.write(ファイル.ストリーム.read())
        print("時間: " + str(datetime.now()) + " オフセット: " + str(オフセット))
OSErrorを除く:
    return jsonify({'ファイルに書き込めませんでした'}), 500