基于antd的上传文件进度条

最新推荐文章于 2024-08-13 16:51:37 发布

lemon678

最新推荐文章于 2024-08-13 16:51:37 发布

阅读量1.5w

点赞数 4

分类专栏： antd

本文链接：https://blog.csdn.net/lemon_zhao/article/details/79065288

版权

基于antd框架，实现了前端上传大文件时显示进度条的功能。通过原生XMLHttpRequest，前端可以获取并显示上传进度，无需频繁调用服务器接口。在上传完成之后，服务器返回文件的大小和路径等信息。

摘要由CSDN通过智能技术生成

最新新搭了一个控制台，是基于阿里antd框架搭建的，总体上来讲，antd从UI交互和组件的api上来看，还都是很好的框架了，不过还是踩了不少坑的，哈哈，后面慢慢整理出来。

这里碰到的情况是，有个上传大文件的需求，需要在前端展示出上传的进度，刚接到需求的时候，我想到的方法是，由server端动态返回上传进度的百分比，前端一直不停的调用这个接口就行了，后来百度了下，发现前端自己就可以实现这个需求，是通过原生XMLHttpRequest实现的，整理了下核心代码

//通过前端原生XMLHttpRequest动态获取上传文件进度
doTransferFile = (file) => {
    let mySelf = this;
    let formData = new FormData();
    let url = "http://xxx:444/upload_file.php";
    let file = document.getElementById("chooseFile").files[0];
    console.log(file)

    formData.append("file",file);
    // console.log(modal);
    // console.log(formData);
    // return false;
    /* eslint-disable */
    $.ajax({ 
        url : url, 
        type : 'POST',
        enctype: 'multipart/form-data',
        data : form