关于nginx中控制文件上传大小配置项 以及 磁盘满导致APP接口上传文件返回500

一、关于nginx中控制文件上传大小的配置项

     在文件上传时,如果上传文件比较大会出现报错:Status Code: 413 Request Entity Too Large,此时的响应头信息详细示例如下:

Request Method: POST
Status Code: 413 Request Entity Too Large
Remote Address: 10.147.26.139:80
Referrer Policy: no-referrer-when-downgrade

     这正是超过了nginx配置的上传文件大小限制导致的。配置项即是client_max_body_size size,其默认大小为1M,详细文档说明:

client_max_body_size Sets the maximum allowed size of the client request body, specified in the Content-Length request header field. If the size in a request exceeds the configured value, the 413 (Request Entity Too Large) error is returned to the client. Please be aware that browsers cannot correctly display this error.

    在视频上传网站,此项配置我们可以设置为1G以上,按需配置:

client_max_body_size 2048M;

    可以选择在http{ }/server{ }/location{ }中设置此项, 控制的范围不同。另外修改此项配置必须杀掉nginx重新启动,否则不能生效。这个是正常的,有些核心参数的修改必须杀掉重启。另外在网上看到一个说法:说用nginx来做webserver的时这种中断在nginx的请求中是无法记录到访问的,其实会记日志:包括 nginx proxy 以及nginx web上都有413错误记录: 

2019/11/09 15:28:06 [error] 2705932#0: *3448 client intended to send too large body: 302491285 bytes, POST /uploadfile?fileName
2019/11/09 15:28:06 [error] 8#8: *4949 client intended to send too large body: 302491285 bytes, client: 15.17.2.19

    最后,虽然nginx上的配置修改了,但是nginx后端的服务也需要进行相应修改,比如后端php的话就需要修改 post_max_size,memory_limit,upload_max_filesize 三项配置值:建议memory_limit的值比上传文件的大小值大点,因为memory_limit除了上传的文件外还有其它程序等所占用空间,不然实际可上传的文件大小肯定不到2048M。

post_max_size = 2048M
memory_limit = 2248M
upload_max_filesize = 2048M

二、磁盘满导致APP接口上传文件返回500

   APP接口那边反馈说一上传文件就出问题,但所有文件上传的接口我之前都调试了,却没有发现问题,试了一下APP接口,一上传文件就返回500。不经意间发现服务器的磁盘满100%了(/dev/xvda100%):

[root@AY /]# df -hl
Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1       20G   20G  0  100% /
tmpfs           1.9G     0  1.9G   0% /dev/shm
/dev/xvdb1      227G  7.1G  208G   4% /home

    我擦,真不知道是什么情况啊,使用命令:du -sh ./* 从顶层开始排查文件夹的大小,发现mysql的文件大小异常啊,这是已经删除后的情况了,之前这种1个多G的文件有快10个了,整个MYSQL占了13G的空间。

    这下总算找到原因了,上回我准备弄主丛同步,把这个服务器当主服务器,后来没有弄同步也忘记关闭主服务器的设置了,结果就导致这个文件一直累加啊。

    mysql的此项配置在配置文件中:log-bin=mysql-bin   //[不是必须]启用二进制日志(如采用文件日志同步,必须打开这项),重新启动MYSQL即可:

/mysqld --defaults-file=/etc/my.cnf --user=root

publish:August 17, 2015 -Monday 

### Nuxt.js 3 中实现图片上传Nginx 服务器 #### 创建基础项目结构 在创建基于 Nuxt.js 3 的应用时,会有一个标准的目录结构来帮助开发者更好地管理不同类型的文件[^1]。 ```bash npm init nuxt@latest my-nuxt-app cd my-nuxt-app npm install ``` 这将初始化一个新的 Nuxt.js 3 应用程序并安装必要的依赖项。接下来可以按照默认提示完成设置过程。 #### 配置前端表单用于上传图片 为了允许用户通过网页界面提交图片,在 `assets/` 或者 `static/` 下放置所需的 CSS 和 JavaScript 资源,并且在 `pages/` 目录下创建一个简单的 HTML 表单: ```html <!-- pages/upload.vue --> <template> <div class="upload-container"> <h2>Upload Image</h2> <form @submit.prevent="handleSubmit"> <input type="file" ref="fileInput" /> <button type="submit">Submit</button> </form> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const fileInput = ref<HTMLInputElement | null>(null) async function handleSubmit() { const formData = new FormData() if (fileInput.value?.files && fileInput.value.files.length > 0) { formData.append('image', fileInput.value.files[0]) try { await fetch('/api/upload', { method: 'POST', body: formData, }) alert('Image uploaded successfully!') } catch (error) { console.error(error) alert('Failed to upload image.') } } } </script> ``` 此代码片段展示了如何构建 Vue 组件中的图像上传功能。当用户选择了要上传文件并通过点击按钮触发事件处理器后,它会向 `/api/upload` 发送 POST 请求并将选定的文件作为 multipart/form-data 进行传输。 #### 设置 API 接口处理请求 由于 Nuxt.js 支持服务端渲染以及内置的服务端能力,可以直接利用这些特性快速搭建起能够接收来自客户端的数据接口。这里假设已经在 `server/api/` 文件夹内定义了一个名为 `upload.ts` 的 RESTful Web Service 来负责保存接收到的照片到指定位置上。 ```typescript // server/api/upload.ts export default defineEventHandler(async (event) => { const config = useRuntimeConfig() let filePath = '' // 处理上传文件 const busboy = require('busboy') const bb = busboy({ headers: event.req.headers }) bb.on('file', async (_, file, info) => { const extname = path.extname(info.filename).toLowerCase() const basename = `${Date.now()}${extname}` filePath = join(config.public.uploadDir || './uploads/', basename) const stream = fs.createWriteStream(filePath) file.pipe(stream) }) return new Promise((resolve, reject) => { bb.on('finish', () => resolve()) bb.on('error', err => reject(err)) event.req.pipe(bb) }).then(() => ({ statusCode: 200, message: "File has been uploaded.", data: { url: `${config.public.baseUrl}/images/${path.basename(filePath)}` }, })).catch((err) => ({ error: true, message: String(err), })) }) ``` 上述代码实现了对于 HTTP POST 请求中携带的二进制数据流解析,并将其存储于本地磁盘上的特定路径之下;同时返回给调用方所生成的新资源链接地址以便后续展示或分享用途。 #### 使用 Nginx 反向代理与静态资源托管 为了让外部网络能顺利访问到已上传成功的媒体资料,通常会选择借助像 Nginx 这样的高性能反向代理服务器来进行流量转发操作。编辑位于站点根目录下的 `.nginx.conf` 文件如下所示: ```nginx http { upstream backend { server localhost:7000; # 替换成实际运行的应用监听端口号 } server { listen 80; server_name example.com; location / { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location ^~ /images/ { alias /var/www/html/uploads/; access_log off; expires max; } } } ``` 这段配置说明了怎样把针对 `/images/*` URL 模式的请求映射到物理硬盘里的相应子目录里去读取目标对象的内容,而其他所有未匹配的部分则继续交给上游节点(即 Node.js/NestJS 等)做进一步处理。 最后重启 Nginx 使更改生效即可测试整个流程是否正常工作[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林戈的IT生涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值