在我们通常开发的web前端项目中，常会遇到表单提交的需求，一般情况下，我们会在一个接口中提交所有的表单，但是如果遇到有文件上传的情况，比如最常见的图片上传，这时候，我们有两种提交表单的方法：一是将图片单独上传，然后将上传后的图片链接地址作为表单项之一和其他表单元素一起提交，这种情况下，我们提交的图片其实只是一个url地址，后端数据库里保存的也是这个url。另外一种提交方式，是将图片和其他表单数据一起提交，不预先做上传处理，也就是说，在表单提交的同时上传图片。
我之前做的表单提交，大多都是第一种情况，先上传图片，再提交图片url。这次在做一个新项目的时候，后端开发同学没有提供单独上传图片的接口，只提供了一个统一的表单提交接口，于是采用了上述的第二种方式。
这次的表单提交后端同学提供的接口类型是post，大家都知道post类型的默认Content-Type是application/x-www-form-urlencoded，这是一种提交为 key - value 格式的类型，而我们要提交图片（也就是上传图片）的话肯定不能采用这种方式，我们采用的是formData的格式。这里的关键点就是，所有的表单元素都要使用formData格式化处理。
所谓formData的格式，其实就是使用了一个js的构造函数FormData，我们需要先new一个实例出来，就像这样：
let formData = new FormData()
然后，我们需要使用append方法，依次将表单元素添加到实例中，就像这样：
formData.append('title', title)
formData.append('titleContext', titleContext)
formData.append('context', context)
formData.append('tag', tag)
formData.append('time', time)
formData.append('images', file)
这里注意一个细节，就是图片的file，我们在使用第三方组件上传图片时，会获取到图片的流信息，像这样的：
其中的content其实是图片转化为base64后的数据，一般用于预览显示，而下面的file才是我们真正用得上的，用于上传的数据。
到了这里还没完全结束，我们还的把请求的Content-Type改为multipart/form-data，在headers中修改即可。当然，也有可能还有其他的配置，视项目实际情况而定。
至此，一个统一的表单提交方式就完成了，这样的话提交也比较方便，不用请求多的接口，以前没有发现，现在做过了才知道，很香，不知道有没有什么坑，如果有知道的同学还望不吝赐教，感谢感谢！
