formdata多文件上传_如何使用FormData轻松上传单个或多个文件

formdata多文件上传

In this post, we'll learn about the FormData interface available in modern web browsers as a part of the HTML5 spec.

在本文中，我们将了解HTML5规范中现代Web浏览器中提供的FormData接口。

We'll see examples of using FormData with Ajax, Angular 7, Ionic and React.

我们将看到在Ajax，Angular 7，Ionic和React中使用FormData的示例。

什么是FormData (What's FormData)

FormData is simply a data structure that can be used to store key-value pairs. Just like its name suggests it's designed for holding forms data i.e you can use it with JavaScript to build an object that corresponds to an HTML form. It's mostly useful when you need to send form data to RESTful API endpoints, for example to upload single or multiple files using the XMLHttpRequest interface, the fetch() API or Axios.

FormData只是一个可用于存储键值对的数据结构。 就像它的名字暗示的那样，它是为保存表单数据而设计的，即，您可以将其与JavaScript一起使用以构建与HTML表单相对应的对象。 当您需要将表单数据发送到RESTful API端点时，例如，使用XMLHttpRequest接口， fetch() API或Axios上传单个或多个文件时，它最有用。

You can create a FormData object by instantiating the FormData interface using the new operator as follows:

您可以通过使用new运算符实例化FormData接口来创建FormData对象，如下所示：

const formData = new FormData()

The formData reference refers to an instance of FormData. You can call many methods on the object to add and work with pairs of data. Each pair has a key and value.

formData引用引用FormData的实例。 您可以在对象上调用许多方法来添加和使用数据对。 每对都有一个键和值。

These are the available methods on FormData objects:

这些是FormData对象上可用的方法：

• append() : used to append a key-value pair to the object. If the key already exists, the value is appended to the original value for that key,

  append() ：用于将键值对附加到对象。 如果该键已经存在，则将值附加到该键的原始值，

• delete()