FormData 报错怎么办？-HCRM博客

FormData报错问题

在使用FormData进行文件上传时，开发者经常会遇到各种错误和异常，本文将详细探讨这些常见的错误原因及其解决方案，并结合具体实例进行说明，以确保内容准确、全面且逻辑清晰。

（图片来源网络，侵权删除）

一、常见错误及解决方案

1. Boundary Not Found (边界找不到)

现象: 服务器端报500错误，提示“Multipart: Boundary not found”。

原因分析:

当全局设置了ContentType为JSON或其他类型时，浏览器无法自动生成multipart/formdata所需的boundary，导致请求失败。

手动添加ContentType为multipart/formdata但未指定boundary也会导致此错误。

解决方法:

（图片来源网络，侵权删除）

不设置ContentType: 在发送请求时，不要显式设置ContentType头信息，让浏览器自动处理。

  const formData = new FormData();
  formData.append('file', file);
  formData.append('mailSys', mailSys);
  // 使用axios发送请求，不设置ContentType
  axios.post('/upload', formData)
    .then(response => console.log(response))
    .catch(error => console.error(error));

移除错误的ContentType设置: 如果之前设置了错误的ContentType，确保将其移除。

2. Unsupported Media Type (不支持的媒体类型)

现象: 服务器端报415错误，提示“Unsupported Media Type”。

原因分析:

请求头中的ContentType与实际发送的数据格式不匹配，例如发送的是multipart/formdata格式的数据，但ContentType却设置为application/json。

解决方法:

确保ContentType正确设置或由浏览器自动处理，如果使用axios，可以通过transformRequest来删除默认的ContentType设置。

  axios.post('/upload', formData, {
    headers: { ...axios.defaults.headers },
    transformRequest: [function (data, headers) {
      delete headers.common['ContentType'];
      return data;
    }]
  })
  .then(response => console.log(response))
  .catch(error => console.error(error));

3. File Object is Empty (文件对象为空)

现象: 前端控制台显示传输的文件为空值{}。

原因分析:

FormData中附加的文件字段为空或未正确获取文件对象。

解决方法:

确保正确获取文件对象并附加到FormData中。

  const fileInput = document.querySelector('input[type="file"]');
  const file = fileInput.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    // 继续发送请求...
  } else {
    console.error('No file selected');
  }

4. Request Payload Too Large (请求负载过大)

现象: 服务器端报413错误，提示“Payload Too Large”。

原因分析:

上传的文件大小超过了服务器配置的限制。

解决方法:

增加服务器配置中允许的最大文件大小，对于Nginx服务器，可以在配置文件中增加client_max_body_size参数。

  http {
    ...
    client_max_body_size 50M;
    ...
  }

二、常见问题FAQs

Q1: 为什么设置了ContentType为multipart/formdata仍然报错？

A1: 当你显式设置ContentType为multipart/formdata时，必须同时指定boundary，手动指定boundary很容易出错，建议让浏览器自动处理，最佳实践是不设置ContentType，让浏览器根据表单数据自动生成合适的头部信息。

Q2: 如何解决跨域请求中的FormData上传问题？

A2: 确保服务器端允许跨域请求，并在响应头中包含AccessControlAllowOrigin、AccessControlAllowMethods和AccessControlAllowHeaders等CORS相关的头信息，客户端在发送请求时应确保凭证（如Cookies）正确传递，如果问题依旧存在，可以尝试在服务器端日志中查找更详细的错误信息以进一步排查问题。

通过以上分析和解答，相信能够帮助开发者更好地理解和解决在使用FormData进行文件上传时遇到的各类问题。