为什么upload.onprogress 放在其他位置不显示进度？

<body>
    <input type="file" id="file1" />
    <button id="btnUpload">上传文件</button>
    <br />
    <img src="" alt="" id="img" width="600" />
    <script>
        var btnUpload = document.querySelector('#btnUpload');
        btnUpload.addEventListener('click', function() {
            var files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!');
            }
            var fd = new FormData();
            fd.append('avatar', files[0]);
            var xhr = new XMLHttpRequest();
            //放在这里控制台会显示进度
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete);
                }
            };
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
            xhr.send(fd);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.status === 200) {
                        document.querySelector('#img').src =
                            'http://www.liulongbin.top:3006' + data.url;
                    } else {
                        alert('上传失败');
                        console.log(data.message);
                    }
                }
            };
        });
    </script>
</body>

放在new XMLHttpRequert()后面就可以在控制台显示进度

<body>
    <input type="file" id="file1" />
    <button id="btnUpload">上传文件</button>
    <br />
    <img src="" alt="" id="img" width="600" />
    <script>
        var btnUpload = document.querySelector('#btnUpload');
        btnUpload.addEventListener('click', function() {
            var files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件!');
            }
            var fd = new FormData();
            fd.append('avatar', files[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
            xhr.send(fd);
            //放在这里就不行
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete);
                }
            };
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.status === 200) {
                        document.querySelector('#img').src =
                            'http://www.liulongbin.top:3006' + data.url;
                    } else {
                        alert('上传失败');
                        console.log(data.message);
                    }
                }
            };
        });
    </script>
</body>

但是放在send()后面就不行了这是为什么呢？

官方文档中有说明，需要在open之前添加。

使用 XMLHttpRequest - Web API 接口参考 | MDN XMLHttpRequest 来发送 HTTP 请求以实现网站和服务器之间的数据交换。常见和晦涩的使用情况都将包含在例子中。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#%E7%9B%91%E6%B5%8B%E8%BF%9B%E5%BA%A6

注意：你需要在请求调用 open() 之前添加事件监听。否则 progress 事件将不会被触发。