Nginx环境下上传进度条不更新问题求助

问题重现 #

上传文件时，前端XMLHttpRequest的upload.onprogress事件无法获取有效进度数据，进度条全程停留在0%，但文件最终可正常上传完成。

我的Nginx配置： #

server {
listen 80;
listen 443 ssl http2;
server_name example.com;
root /www/wwwroot/example/example.com;
index index.php index.html index.htm;

client_max_body_size 20M;
client_body_buffer_size 128k;

add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';

# SSL configuration
ssl_certificate /www/server/panel/vhost/cert/example.com/fullchain.pem;
ssl_certificate_key /www/server/panel/vhost/cert/example.com/privkey.pem;

# Enforce HTTPS
if ($server_port !~ 443){
    rewrite ^(/.*)$ https://$host$1 permanent;
}

# PHP config
include enable-php-83.conf;

# Location for uploads
location /u/uploads {
    client_max_body_size 20M;
    client_body_buffer_size 128k;
    proxy_request_buffering off;
    proxy_buffering off;
}

# Forbidden files or directories
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|LICENSE|README.md) {
    return 404;
}

access_log /www/wwwlogs/example.com.log;
error_log /www/wwwlogs/example.com.error.log;

前端上传代码： #

function uploadFile(file) {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);

xhr.open('POST', '/u/upload.php', true);

xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Upload progress: ${percentComplete}%`);
    }
};

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log('File uploaded successfully');
    } else {
        console.error('Upload failed');
    }
};

xhr.send(formData);

问题原因 #

1. Location规则不匹配：配置的location /u/uploads仅匹配路径以/u/uploads开头的请求，但实际上传请求发到/u/upload.php，导致上传相关的缓冲禁用规则完全未生效。
2. Nginx默认缓冲请求体：Nginx默认会将整个客户端请求体缓冲到内存或磁盘后，才转发给PHP-FPM处理。这种情况下，前端onprogress事件只会在文件完全上传后触发一次，无法实时显示进度。

修复步骤 #

1. 调整Nginx配置，针对上传接口禁用请求缓冲 #

修改Nginx配置，添加针对/u/upload.php的location规则，确保禁用请求体缓冲：

# 针对上传接口单独配置，优先级高于全局PHP规则
location = /u/upload.php {
    client_max_body_size 20M;
    # 禁用请求体缓冲，让Nginx实时把数据传给PHP
    client_body_buffer_size 4k;
    client_body_in_file_only clean;
    client_body_temp_path /tmp/client_body_temp;
    # 加载原有PHP配置
    include enable-php-83.conf;
}

2. 重新加载Nginx配置 #

执行以下命令让配置生效：

nginx -s reload

3. 验证效果 #

重新测试文件上传，此时upload.onprogress应能正常输出实时进度百分比，进度条可正常更新。

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