上传进度条无法与 Nginx 配合使用

Question

我遇到上传进度条问题，通过 Nginx 上传文件时该进度条不会更新。进度条无法反映任何进度更新，在整个上传过程中保持在 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;

}

我正在使用 JavaScript XMLHttpRequest 发送文件并跟踪进度：

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);

}

Answer 1

使用以下 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;
    proxy_set_body             off;
    proxy_pass                 http://[::1]:4000/$request_method;
}

# 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;
}

server {
    listen [::1]:4000;
    location /POST { return 204; }
    location /GET  { return 200; }
}

我正确地获得了上传进度，我使用了 Firefox 节流来降低上传速率，每秒左右调用一次 js 进度回调。

不一定需要

FormData

，如果不需要编码的文件形式，可以直接发送

xhr.send(file);