react利用ajax实现文件上传显示上传进度

        在项目使用过程中，有时候因为网络过慢或者服务器响应时间较长，点击文件上传后一直转圈圈，也不知道上传进度咋样，就傻等，所以感觉需要显示一下上传进度，然后查阅资料找到一种解决方法，特此记录一下。

解决方案：

简单的制作了一个组件，用来处理文件上传，并实时显示上传进度

import React, {
    useState
} from "react";
import $ from "jquery";

function MyUpload(props){
    const [uploadPercent, setUploadPercent] = useState(0);
    const [uploadSign, setUploadSign] = useState(1);
    //监听文件上传进度，实时更新变量uploadPercent进行显示
    const resultProgress = (e) => {
        let percent = (e.loaded / e.total * 100).toFixed(2);
        setUploadPercent(percent);
    }
    const uploadMethod = () => {
        let file = document.getElementById("file").files[0];
        let formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "/bumf/upload",
            type: "post",
            data: formData,
            async: true,
            dataType:'json',
            cache: false, // 上传文件无需缓存
            processData : false, // 使数据不做处理
            contentType: false, //不额外设置请求头
            xhr: function () {
                //获取ajax中的xhr对象，绑定一个进度监听函数
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener("progress", resultProgress, false);
                }
                return myXhr;
            },
            success: function (data) {
                setUploadSign(1);
            },
            error: function (data) {
                setUploadSign(0);
            }
        })
    }
    return (
        <div className="my_upload_container">
            <input type="file" id="file" name="file" />
            {
                uploadSign === 1?
                <span>{uploadPercent}%</span>:
                <span style={{color: "#ff0000"}}>上传失败！</span>
            }
            <div className="upload_btn" onClick={uploadMethod}>确认上传</div>
        </div>
    )
}

export default MyUpload;

显示结果：