httpclient 分片上传文件_文件分片上传

大文件上传

场景分析

在业务场景中文件上传很普遍，而大文件的上传经常会导致上传时长过久，大量占用带宽资源，而分片上传就解决了目前的问题。

解决方案

前端

• 获取文件进行分片
• 请求服务端过滤出未保存的分片
• 未保存分片上传 Promise限流
• 上传完毕，发送合并分片请求

import React from 'react';
import {
     uploadFetch } from './utils/upload';
import ConcurrentUtil from './utils/concurrent'
import "./file.css";

export default class FileContainer extends React.Component {
    
    constructor() {
    
        super();
        this.concurrent = new ConcurrentUtil(this.uploadRequest,this.mergeRequest);
        this.state = {
    
            file: null,
            fileSplit: [],
        };
    }

    onChange = (event) => {
    
        event.persist();
        const [file] = event.target.files;
        this.setState({
    
            file
        });
        this.concurrent.setState({
    
            file
        });
        event.preventDefault();
    }

    handleSubmit = async (event) => {
    
        event.preventDefault();
        const startTime = new Date().getTime(),
            {
     name: file_name } = this.state.file;
        console.log("start at: -----> ", startTime);
        //1.请求服务端，查找对应文件块
        const {
     data: {
     list: pathList } } = await uploadFetch({
    
            action: '/v1/resources/blobs',
            data: {
    
                file_name
            }
        })
        this.concurrent.handleUpload(pathList)