Angular 5 HttpRequest reportProgress在Edge浏览器无进度反馈问题排查

看起来你遇到的是旧版EdgeHTML内核的Edge（非Chromium内核新Edge）对XMLHttpRequest进度事件的特殊处理问题。从你提供的日志来看，最初触发的progress-- true event.type == 0对应loadstart初始化阶段，这个阶段还未获取到上传文件的总大小（total值为0），自然无法计算有效进度；而停顿后出现的type:1才是真正的上传进度事件，此时loaded和total才有有效值。

问题根源 #

EdgeHTML内核的Edge在处理FormData上传时，会先触发一个不包含有效进度数据的progress事件，之后才会在实际传输数据时持续触发正常的进度事件。如果你的代码没有对total值做有效性判断，直接用它计算进度，就会出现长时间无进度显示的情况。

解决方案 #

你可以通过以下几点修改代码，适配Edge的行为：

• 提前绑定事件监听：确保progress事件的监听在xhr.open()之前设置，避免Edge错过早期事件
• 判断进度数据有效性：只在event.lengthComputable为true且event.total > 0时更新进度UI
• 不要手动设置Content-Type：使用FormData时，浏览器会自动生成带正确边界的请求头，手动设置会破坏上传逻辑

修改后的代码示例：

Upload(file : File, id:number, endPoint:string) : void { 
    const formData = new FormData(); 
    formData.append(file.name, file); 
    const auth = "Bearer " + this.Auth.GetAuth(); 
    
    // 先创建XHR并绑定事件，确保在open前完成
    const xhr = new XMLHttpRequest();
    
    // 监听上传进度事件
    xhr.upload.addEventListener('progress', (event) => {
        // 仅在进度数据可计算时更新UI
        if (event.lengthComputable && event.total > 0) {
            const progress = (event.loaded / event.total) * 100;
            console.log(`progress: true loaded: ${event.loaded} total: ${event.total}`, progress);
            // 这里更新你的进度显示UI
        } else {
            console.log('progress-- true event.type == 0'); // 对应你看到的初始化日志，不更新UI
        }
    });
    
    xhr.open('POST', endPoint, true);
    xhr.setRequestHeader('Authorization', auth);
    // 注释掉手动设置Content-Type的代码，让浏览器自动处理
    // xhr.setRequestHeader('Content-Type', 'multipart/form-data');
    
    // 绑定上传完成/错误事件
    xhr.onload = () => {
        // 处理上传完成逻辑
    };
    xhr.onerror = () => {
        // 处理上传错误逻辑
    };
    
    xhr.send(formData);
}

额外说明 #

如果是Chromium内核的新Edge出现该问题，大概率是事件绑定时机错误，或者服务器未返回正确的Content-Length响应头。但从你的日志特征来看，更偏向旧版EdgeHTML的兼容性问题，上述方案应该能解决你的问题。

内容的提问来源于stack exchange，提问作者Bailey Miller