为什么我的multipart/form-data没有boundary

一、问题概述

最近在写一个文件上传插件，封成了一个npm包。本来想内部集成axios，但是发现打出来包很大，所以使用原声XMLHttpRequest 去实现。

            // 简化代码如下：
            let xhr = new XMLHttpRequest()
            // 如果是get请求，需要将参数直接写入请求地址后面
            xhr.open("POST", "http://example.com/api/some");
            xhr.setRequestHeader('Content-Type', "multipart/form-data");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const res = JSON.parse(xhr.responseText)
                }
            }

习惯性的设置了Content-Type为multipart/form-data 请求后发现,请求头是这样的

查看请求载荷，也没有被正确解析，这是因为浏览器会根据multipart/form-data后的 boundary来分割formData

二、问题解决

其实当我们使用xhr发送formData的时候，不需要设置content-type，浏览器会自动加上，并且指定boundary，我去掉了xhr.setRequestHeader('Content-Type', "multipart/form-data");这段代码。

成功解析了

三、总结

问题其实不大，就是我使用了太久的第三方库，这种东西第三方库都会帮我们处理好了，所以舒适太久了，忘了它原本的机制了。记录一下。💪🏻