axios上传文件带进度条

最新推荐文章于 2024-05-27 20:43:07 发布

liu__software

最新推荐文章于 2024-05-27 20:43:07 发布

阅读量1.5k

点赞数 1

分类专栏： axios 文章标签： javascript xmlhttprequest

原文链接：https://www.jianshu.com/p/2ec9cc044096

版权

axios 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件进度条</title>
    <style>
        body {
            position: relative;
            width: 1920px;
            height: 984px;

        }

        .box {
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -30%);
        }

        .wrap {
            width: 300px;
            height: 20px;
            box-shadow: 0 0 10px pink inset;
            border-radius: 10px;
            border: 2px solid #eee;
            background: rgba(0, 0, 0, 0.5);
            margin-top: 20px;
            position: relative;
            display: none;

        }

        .children {
            width: 0;
            height: 20px;
            box-shadow: 0 0 5px #eee outset;
            border-radius: 10px;
            background: -webkit-linear-gradient(left, #FF34B3 0%, #FF7256 50%, yellow 100%);
                                
        }

        #percent {
            position: absolute;
            top: 0px;
            left: 0;
            margin: 0;
        }
    </style>
</head>

<body>

    <div class="box">
        <input type="file" id='input'>

        <div class="wrap" id='wrap'>
            <div class="children" id='children'>
                <!-- <input type="file" accept="image/*" multiple> -->
            </div>
            <p id='percent'>0</p>
        </div>
    </div>




    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var Input = document.getElementById('input')
        var Wrap = document.getElementById('wrap')
        var Children = document.getElementById('children')
        var Percent = document.getElementById('percent')
        Input.onchange = function (event) {

            console.log('event', event)
            let file = event.target.files[0]

            const formData = new FormData()

            formData.append('userName', 'admin')
            formData.append('projectId', '735136fcf95a41248cc94127f7963ea8')
            formData.append('file', file)


            console.log('formData', formData)

            var percent = 0;

            uploadPhoto(formData, function (e) {
                Wrap.style.display = 'block'
                percent = e.loaded / e.total * 100
                Children.style.width = percent + '%'
                Percent.innerHTML = Math.ceil(percent) + '%'
                Percent.style.left = Math.ceil(percent) + '%'

            }, function (res) {
                if (res.code === 1) {
                    alert('上传成功')
                    Children.style.width = 0 + '%'
                    Wrap.style.display = 'none'
                }


            })

        }

        function uploadPhoto(payload, callback1, callback2) {
            axios({
                url: 'http://192.168.31.253:8080/upload',
                method: 'post',
                headers: {
                    Authorization: 'sdfasfsfwrfrwerrrrrrrrrrrfbdddddddddddddd',
                    'Content-Type': 'multipart/form-data'
                },
                onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
                    if (progressEvent.lengthComputable) {
                        //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                        //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                        callback1(progressEvent);
                    }
                },
                data: payload
            }).then(res => {
                callback2(res.data);
            }).then(error => {
                console.log(error)
            })
        }
    </script>

</body>

</html>

https://blog.csdn.net/wyx15011474269/article/details/81197598

  //axios api

  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

转载于：https://www.jianshu.com/p/2ec9cc044096

axios说明：https://www.kancloud.cn/yunye/axios/234845