You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动