为什么要用form-data传输图片呢？

Question

最近在做后台管理小练习，看很多教程在前后端传输图片这块数据格式用的都是form-data；
但是其他所有数据差不多都是json格式的，想问一下用form-data传输图片和json相比有啥优势吗？可以用json代替不？

Answer 1

MDN 关于 FormData 第一行就说了什么是 FormData 和他的优势。

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

关于 XHR 上传文件也可以不使用 FormData ，但是你需要像下面这个链接里面这样自己封装一个方法来拼接参数，构建一个文件上传表单，达到同样的效果。

• 使用 XMLHttpRequest - Web API 接口参考 | MDN

这样如果你是前端你可能就会很不爽，因为这需要你来拼接数据，达到最终的效果，而后端和你使用 FormData 上传处理的方式一样，因为 FormData 最终也会转成这种数据后发送。

上面的方法你看起来会很不爽，但是有其他办法么，当然是有的： Base64 ，你可以把文件读入后使用 JS 把他转成 Base64 字符串，现在这个文件就是一个普通的 Base64 字符串了，然后这样你就可以把它作为一个 json 对象的值进行发送了，但是这样的坏处就是转码后的 Base64 字符串会比源文件的体积大 1/3，其次，因为这一部分你需要在用户设备上完成，如果文件太大，用户体验就会极差，其次，这样转 Base64，虽然你简单了，但是后台在接收到你的 Base64 字符串又要做另外的处理，后台可能就不会很爽了，他需要转码(占用大量资源)后再存储文件，而且他还要把你传递的数据作为一个简单表单来处理(因为在一些后端语言，处理标准的文件上传有统一的方法，甚至对于脚本语言，这一部分会使用 C 来进行处理进而提高效率，但是如果你这样做的话，后端就全部得自行在业务代码中处理)。

现在，你应该就会明白为啥会有 FormData 这个接口了。