Ionic4使用FileTransfer上传图片遭遇413请求实体过大错误

看起来你遇到的413 Request Entity Too Large错误是服务器端的请求大小限制问题，但Postman能正常上传说明服务器本身支持该文件的大小，问题出在你的Ionic请求和服务器配置的匹配上。结合错误栈里的body-parser和jsonParser信息，我整理了几个针对性的排查和解决步骤：

1. 修正后端的文件上传处理逻辑 #

你的错误栈显示服务器正在用jsonParser处理请求，但FileTransfer上传文件时发送的是multipart/form-data类型的请求，而body-parser并不支持解析这种类型的请求，这会导致解析失败同时触发大小限制错误。你需要用multer（Express官方推荐的文件上传中间件）来处理文件上传：

首先安装multer：

npm install multer --save

然后修改后端代码，配置multer并在路由中使用：

const multer = require('multer');
// 设置文件存储路径和大小限制（这里示例设为10MB，根据你的需求调整）
const upload = multer({
  dest: './uploads/',
  limits: { fileSize: 10 * 1024 * 1024 }
});

// 替换你的上传路由，用upload.single('Photo')对应你的fileKey
app.post('/your-upload-endpoint', upload.single('Photo'), (req, res) => {
  // 上传的文件信息在req.file中
  console.log('上传的文件:', req.file);
  // 你传递的params参数会在req.body中
  console.log('表单参数:', req.body);
  // 后续的业务逻辑...
  res.status(200).json({ message: '上传成功' });
});

同时，确保body-parser的配置只处理它支持的请求类型，不要影响multipart请求：

const bodyParser = require('body-parser');
// 仅处理JSON和urlencoded请求，设置合理的大小限制
app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: true, limit: '10mb' }));

2. 调整Ionic端的FileTransfer配置 #

虽然你的代码看起来没问题，但可以尝试几个小调整来确保请求格式正确：

• 明确指定请求头的Content-Type（虽然FileTransfer应该自动处理，但手动指定可以避免潜在的格式问题）：

let options: FileUploadOptions = {
  fileKey: "Photo",
  chunkedMode: false,
  httpMethod: "POST",
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  params: {
    "Name": "demo",
    "Addr1": "demo",
    "Addr2": "demo",
    "City": "demo",
    "StateCode": "demo",
    "CountryCode": "demo",
    "ZipCode": "demo",
    "WebsiteUrl": "demo",
    "PhoneNo": "demo",
    "Email": "demo",
    "CompanyDescription": "demo"
  }
};

• 尝试开启分块上传：将chunkedMode设为true，分块上传可以绕过一些服务器的单次请求大小限制：

chunkedMode: true,

3. 检查服务器的反向代理限制（如果有） #

如果你的后端部署在Nginx等反向代理后面，需要确认Nginx的client_max_body_size设置，这个限制会优先于Express的配置。修改Nginx配置文件：

# 在http、server或location块中添加
client_max_body_size 10M; # 大小根据你的文件需求调整

修改后重启Nginx生效。

4. 验证请求的实际大小 #

在服务器端添加一个中间件，打印请求的Content-Length，确认实际发送的大小是否超过了服务器的限制：

app.use((req, res, next) => {
  console.log('请求大小:', req.headers['content-length']);
  next();
});

然后对比你设置的各种大小限制（multer的fileSize、body-parser的limit、Nginx的client_max_body_size），确认是否存在不匹配的情况。

内容的提问来源于stack exchange，提问作者Jaydip Kalkani