vue3 nginx 下文件上传问题

Question

我有一个前端 vue3 项目，使用nginx代理后上传图片，后台接口无法获取到图片，显示的是 null；如果不使用 ng 代理而是直接运行，此时前端调用接口上传图片就成功了。使用F12查看这两次的传输；发现成功的那次只有二进制数据以及别的数据内容，而失败的那次除了别的数据内容和二进制数据外还有一些图片的参数内容。该怎么解决图片上传的问题？
后台接口声明：

@PostMapping(value = "/student/addStudent")
public Object addStudent(StudentDTO studentDTO, @RequestParam(name = "file", required = false) MultipartFile file) throws IOException

前端部分代码：

export function addStudent(data: StudentRegistrationInfo) {
  return request({
    url: "/student/addStudent",
    method: "post",
    data,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}

ng的配置：

user  nobody;
worker_processes  1;

error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    # 文件上传关键配置
    client_max_body_size 10M;
    client_body_buffer_size 128k;
    client_header_timeout 60s;
    client_body_timeout 60s;
    proxy_connect_timeout 60s;
    proxy_read_timeout 60s;
    proxy_send_timeout 60s;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       10001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/Work/studentMa/studentUi/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # API代理配置
        location /api/ {
            proxy_pass http://localhost:10002;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            proxy_http_version 1.1;
                        proxy_set_header Upgrade $http_upgrade;
                        proxy_set_header Connection 'upgrade';
        }

        # 文件上传专用配置
        location /upload {
            client_max_body_size 10M;
            proxy_pass http://localhost:9025;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3 + Nginx 文件上传问题

你遇到的问题是，使用 Nginx 代理后，前端 Vue3 项目无法正确地上传图片到后台接口，而是显示 null。如果不使用 Nginx 代理，而是直接运行前端项目，这时上传图片就成功了。

可能的原因是 Nginx 代理对文件上传的处理方式不同于直接运行前端项目。Nginx 可能会对文件上传的请求进行修改，导致后台接口无法正确地获取文件。

以下是一些可能的解决方案：

1. 检查 Nginx 配置文件中的 proxy_pass 语句，确保它正确地将文件上传请求转发到后台接口。
2. 在 Nginx 配置文件中添加 proxy_set_header 语句，设置 Content-Type 和 Content-Length 头信息，以便正确地传输文件。
3. 在前端项目中，使用 axios 或其他 HTTP 客户端库时，设置 withCredentials 选项为 true，以便正确地传输文件。
4. 检查后台接口的文件上传处理逻辑，确保它正确地处理文件上传请求。

以下是一个示例 Nginx 配置文件，用于将文件上传请求转发到后台接口：

http {
    ...
    server {
        listen 80;
        server_name example.com;

        location /api {
            proxy_pass http://localhost:8080;
            proxy_set_header Content-Type $http_content_type;
            proxy_set_header Content-Length $http_content_length;
        }
    }
}

在上面的配置文件中，我们使用 proxy_pass 语句将文件上传请求转发到 http://localhost:8080，并使用 proxy_set_header 语句设置 Content-Type 和 Content-Length 头信息。