Vue.js上传超10MB图片附件时触发ERR_FAILED 413 (Payload Too Large)错误的解决方案咨询
Vue.js上传超10MB图片附件时触发ERR_FAILED 413 (Payload Too Large)错误的解决方案咨询
嗨,我来帮你搞定这个413错误的问题~这个报错本质是服务器拒绝了过大的请求体,咱们一步步来排查解决:
1. 优先调整后端的请求体大小限制(核心解决步骤)
413错误是服务器端返回的,所以首先要确保你的后端服务允许接收更大的请求。如果你的后端是Express框架,需要做以下配置:
处理普通JSON/表单请求
如果你的图片是通过JSON或表单字段传递的,要修改Express的解析中间件限制:
const express = require('express'); const app = express(); // 设置JSON请求体最大限制为50MB(可根据需求调整) app.use(express.json({ limit: '50mb' })); // 设置URL编码请求体的最大限制 app.use(express.urlencoded({ extended: true, limit: '50mb' }));
处理文件上传(如果用multer)
如果是用multer处理文件上传,需要在multer配置里设置文件大小限制:
const multer = require('multer'); // 限制单文件大小为50MB const upload = multer({ limits: { fileSize: 50 * 1024 * 1024 } }); // 在路由中使用这个upload中间件 app.post('/api/studentinfo', upload.array('images'), (req, res) => { // 处理上传的文件和表单数据 });
2. 检查前端axios的配置
虽然主要问题在后端,但也要确保前端的axios实例没有限制请求体大小。在你的api实例创建时添加这两个配置:
import axios from 'axios'; const api = axios.create({ baseURL: '/api', // 设置允许的响应内容最大长度 maxContentLength: 50 * 1024 * 1024, // 设置允许的请求体最大长度 maxBodyLength: 50 * 1024 * 1024 }); export default api;
3. 纠正你config.js里的无效配置
你在pm2的config.js里加了configureWebpack配置,这是Vue CLI的打包配置,不应该放在pm2的配置文件里,而且这个配置是用来分割打包后的代码块大小的,和上传文件的大小限制完全无关。你需要把这部分移到Vue项目根目录的vue.config.js里,但它对当前的413问题没有帮助,可以暂时忽略。
4. 可选:大文件分片上传(针对超大型文件)
如果你的图片经常超过50MB甚至更大,建议采用分片上传的方案:把大文件切成多个小片段,逐个上传到后端,最后让后端合并这些片段。前端示例代码如下:
async function uploadLargeImage(file) { const chunkSize = 5 * 1024 * 1024; // 每片5MB const totalChunks = Math.ceil(file.size / chunkSize); for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { const start = chunkIndex * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunkBlob = file.slice(start, end); const formData = new FormData(); formData.append('imageChunk', chunkBlob); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', totalChunks); formData.append('fileName', file.name); // 上传单分片 await api.post('/api/upload-image-chunk', formData); } // 通知后端合并所有分片 await api.post('/api/merge-image-chunks', { fileName: file.name, totalChunks: totalChunks }); }
后端需要对应编写接收分片和合并分片的接口,这种方案可以避免一次性发送超大请求,也能提升上传的稳定性。
备注:内容来源于stack exchange,提问作者user2432361




