前言

对于这次前后端联调过程中，暴露了自己的问题。之所以会造成这次联调的尴尬，是由于之前在写另一个系统的文件上传时和后端联调很顺利。对于这次前后端联调时调用后端的文件上传Payload显示的就是Form Data，但是这次前端代码逻辑代码和之前是一样的，调用后端接口时Payload显示的是Request Payload，这个问题导致后端拿不到文件。总之这次联调过程中连空气都充满了尴尬。

排查问题

一、Payload对比

1. 图一是错误的 2. 图二是正常的

二、排查与解决

1. 后端排查接口问题

后端杨哥和我一样也不太了解FormData文件上传，发现接口和其他文件上传接口逻辑都是一样的，这样我们就陷入了迷茫。

其中有位小哥说Payload为Form Data是前端传参决定的。这时我就尴尬的继续排查前端代码，可是排查很久还是很迷茫，我传入接口的就是FormData类型，之前项目也是这样写的啊。

迷茫很久后,我就去找恩哥帮忙，后面排查发现确实是前端的问题，这时心里想“好尴尬，怎么和后端说呢，之前一直以为是后端问题”。主要原因是封装的POST请求里调用了将接口参数过滤为null的对象属性方法filterNullProperty，这个方法导致FormData变成{}。

 // 需要在filterNullProperty方法加下面这行代码，将FormData类型的直接返回
  if (params instanceof FormData) return params;

知识拓展

payload和formData有什么不同？ 这是我看了一篇对相关知识讲述比较好的文章，大家有空可以看看！

formData控制台打印为{}

这里大家不要以为formData真的是为{},其实是有值的

获取formData里的值

  // 需要通过FormData里的get方法
  console.log("formData", formData.get("file"));

总结

通过这次联调我发现了自己的问题，不能一味的照葫芦画瓢，也要慢下来去学习其中的原理。希望自己能够不断成长，在错误中不断进步！