使用 Progress React 上传文件

Posted 2023-03-22

【中文标题】使用 Progress React 上传文件

【英文标题】：File Upload with Progress React

【发布时间】：2021-12-27 21:45:19

【问题描述】：

我正在尝试上传文件并将组件状态下的文件保存为 file.originFileObj，我希望我的输出与上传文件时一样，应该显示进度

选择后上传文件时

我用过antd上传但它没有提供圆形和文件大小状态以及那种百分比，我也尝试过简单的html输入标签但它也不起作用，last thing我接近要求正在将文件上传到某个 URL 并显示该进度，但我需要保存在我的状态和上传状态中，如图所示 2

【参考方案1】：

为您的 api 请求添加选项

    const options = 
        onUploadProgress: (progressEvent) => 
            const loaded, total = progressEvent
            let percent = Math.floor(loaded * 100 / total)
            this.setState(
                uploadPercentage: percent
            )
        ,
    

【讨论】：

被问到不涉及API请求，上传一个pdf文件保存到Component状态