nginx服务器实现上传文件功能_使用nginx-upload-module模块

目录

conf文件内容如下

复制代码
#user  nobody;
worker_processes  1;

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

#pid        /usr/logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    sendfile        on;
    keepalive_timeout  65;

    
    server {
        listen       80;
        server_name  localhost;
        client_max_body_size 100m;
        location / {
            root /root/nginxShare;
            index uploadfile.html uploadfile.htm;  # 这会使得在访问根目录时默认展示 uploadfile.html

        }
        
        error_page 405 =200 @405;
        
         # 配置上传位置
        location /upload {

        if ($request_method = 'GET'){
            root /root/nginxShare;
        }
        if ($request_method = 'POST'){
                
            upload_pass @test;  # 指定上传完成后请求的处理位置
               
            # upload_store /root/nginxShare/upload 1;  # 数字1表示启用了一种特殊的文件存储机制,即分散存储
            upload_store /root/nginxShare/upload;
            
            upload_store_access user:rw; #上传文件的权限,rw表示读写 r只读
            
            #这里写入http报头,pass到后台页面后能获取这里set的报头字段
            upload_set_form_field "${upload_field_name}_name" $upload_file_name;
            upload_set_form_field "${upload_field_name}_content_type" $upload_content_type;
            upload_set_form_field "${upload_field_name}_path" $upload_tmp_path;
            
            #Upload模块自动生成的一些信息,如文件大小与文件md5值
            upload_aggregate_form_field "${upload_field_name}_md5" $upload_file_md5;
            upload_aggregate_form_field "${upload_field_name}_size" $upload_file_size;
                    
            upload_pass_form_field "^submit$|^description$";
            
            upload_cleanup 400 404 499 500-505; #如果pass页面是以下状态码,就删除此次上传的临时文件       
  
        }      
        }

        # 处理上传完成后的请求
        location @test {
            # 这里可以配置代理到后端服务,或者直接返回响应
            # 例如,返回一个简单的文本响应
            return 200 'File uploaded successfully!20241104';

            # 或者代理到某个后端服务处理上传后的逻辑
            # proxy_pass http://localhost:7123;;
        }       

    }
    
    server {
		listen       9000;
		server_name  localhost;
		
		client_max_body_size 100m;
		charset      gbk,utf-8;

		root /root/nginxShare;


		location / {
		     auth_basic   "Restricted";  
         autoindex on;
         autoindex_exact_size on;
         autoindex_localtime on;
	   
		}
	}        
}

html文件在/root/nginxShare目录下。

上传的文件存放在/root/nginxShare/upload目录下。

上传成功会返回一个文本响应,文本内容为:File uploaded successfully!20241104

html文件内容如下

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传测试</title>
</head>
<body>
    <h2>文件上传</h2>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" required>
        <br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

上传文件功能展示

运行nginx服务器

复制代码
mkdir -p /var/log/nginx /var/tmp/nginx

./sbin/nginx -c /etc/nginx/nginx.conf

在浏览器输入:192.168.61.61::80

显示页面如下:

点击选择文件,选择本地文件,点击上传后,会弹出如下页面:

下载该文件后,查看文件内容:

可以看到,文本内容符合预期,接着我们查看/root/nginxShare/upload目录

可以看到,文件已上传成功,不过文件的名字是从1开始的,具体怎么控制文件名还没实现。

相关推荐
GIS之路1 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒3 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol4 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉4 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau4 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生4 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼4 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879974 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter
可观测性用观测云4 小时前
云原生网关 Ingress-Nginx 链路追踪实战:OpenTelemetry 采集与观测云集成方案
nginx·kubernetes
leolee184 小时前
Redux Toolkit 实战使用指南
前端·react.js·redux