在前端开发中，我们经常需要上传文件或者提交表单数据。JavaScript 本身并没有提供一个合适的 API 来实现这个功能，但是 HTML5 引入了 FormData，这个 API 可以使得表单数据的上传变得非常方便。然而，在一些旧的浏览器中，FormData 不被完全支持。这时候，我们就需要使用 @bretkikehara/formdata-polyfill 这个 npm 包来解决这个问题。
为什么需要 @bretkikehara/formdata-polyfill
首先，让我们来看一下 FormData 的工作原理。
在新版的浏览器下，我们可以通过以下方式来获取表单数据：
const formData = new FormData(document.querySelector('form'));这个代码中，我们首先获取了一个表单元素，然后使用 FormData 构造函数创建了一个 FormData 对象并将表单元素传递进去。接下来，通过使用 XMLHttpRequest 或 Fetch API 将这个 FormData 对象上传到服务器即可。
但是在一些旧的浏览器中，FormData 并不被完全支持。因此，我们需要使用 Polyfill 来解决这个问题。
这时候，就可以使用 @bretkikehara/formdata-polyfill 这个 npm 包了。这个包实现了 FormData 的所有功能，并且可以在旧的浏览器中使用，这样我们就不需要担心兼容性问题了。
如何使用 @bretkikehara/formdata-polyfill
使用 @bretkikehara/formdata-polyfill 已经非常简单了。我们只需要在我们的项目中引入这个包，然后就可以创建一个 FormData 对象了。
首先，安装 @bretkikehara/formdata-polyfill：
npm install @bretkikehara/formdata-polyfill --save
或
yarn add @bretkikehara/formdata-polyfill
然后，我们只需要在代码中引入这个包即可：
import 'formdata-polyfill';
接下来，我们就可以像使用原生的 FormData 一样来使用这个包了：
const formData = new FormData();
formData.append('username', 'admin');
formData.append('password', '123456');示例代码
下面是一个完整的示例代码。我们使用了 @bretkikehara/formdata-polyfill 包来创建一个 FormData 对象，并使用 Fetch API 来将这个对象上传到服务器。
-- -------------------- ---- ------- ---- ---------- --- ----- ---------------- ------ --------------------------- ------ ----------- ------------- --------------- -- ------ -------------------------- ------ --------------- ------------- --------------- -- ------- ------------- --------------------------- ------- ------- ------------------------
-- -------------------- ---- -------
-- --------
------ --------------------
--------------------------------------------------------------- -- -- -
----- -------- - --- ------------------------------------------------
------------------- -
------- -------
----- --------
--
--------- -- -----------
---------- -- -
------------------
---
---这段代码中，我们首先在 form 元素上绑定了一个 click 事件。当用户点击按钮时，我们使用 new FormData() 创建一个 FormData 对象，然后使用 fetch API 将这个对象上传到服务器。
总结
在本文中，我们介绍了如何在前端开发中使用 @bretkikehara/formdata-polyfill 这个 npm 包来兼容旧的浏览器对 FormData 的不完全支持。同时，我们还介绍了这个包的安装和使用方法，并提供了一个示例代码。希望这篇文章可以对您在前端开发中遇到的 FormData 兼容性问题提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055af981e8991b448d8a12