axios post提交formdata的实例

下面是详细的攻略。

1. axios post提交formdata的基本语法

在使用axios提交formdata时，需要使用FormData类来创建一个表单对象。具体语法如下：

const formData = new FormData()
formData.append('name1', 'value1')
formData.append('name2', 'value2')
axios.post('/url', formData)

这里的formData.append方法用于给表单对象添加属性和对应的值，可以多次调用该方法添加不同的属性和值。axios.post方法用于以POST请求方式提交表单数据到指定URL。

在上面的代码示例中，我们以FormData的方式向服务器发送了两个参数name1和name2，分别对应value1和value2。

2. 示例一：以form表单方式提交数据

下面是一个以form表单的方式提交数据的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Formdata Demo</title>
</head>
<body>
  <form>
    <div>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <input type="text" id="age" name="age">
    </div>
    <div>
      <button type="button" onclick="submitForm()">Submit</button>
    </div>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    function submitForm() {
      const formData = new FormData()
      formData.append('name', document.getElementById('name').value)
      formData.append('age', document.getElementById('age').value)

      axios.post('/api/submit', formData)
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.error(err)
        })
    }
  </script>
</body>
</html>

在这个示例中，我们在表单中添加了两个输入框和一个提交按钮。当用户点击提交按钮时，submitForm函数会被调用，该函数首先使用FormData类创建表单对象，然后使用该对象收集用户输入的数据，最后发送POST请求到服务器。

这个例子中的POST请求会将表单数据发送到与当前页面同源的/api/submitURL，您可以替换为您自己服务器端接收表单数据的URL。

3. 示例二：以对象方式提交数据

下面是一个以对象的方式提交数据的示例：

const formData = {
  name: 'Tom',
  age: 20,
  hobby: ['swimming', 'reading']
}

const headers = {
  'Content-Type': 'application/x-www-form-urlencoded'
}

axios.post('/api/submit', qs.stringify(formData), headers)
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.error(err)
  })

在这个示例中，我们首先创建了一个formData对象，包含一个名称、一个年龄和一个爱好数组。然后，我们设置了一个Content-Type头部，指示我们提交的数据是表单数据。

最后，我们使用qs.stringify方法将formData对象转换为URL编码格式，然后将其与相应的headers一起发送到服务器。在服务器上，您可以使用以下代码来解析这个表单数据：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.urlencoded({ extended: true }))

app.post('/api/submit', (req, res) => {
  const formData = req.body
  console.log(formData)
})

app.listen(3000, () => console.log('Server started'))

上面代码中使用了较为常见的express框架和中间件body-parser，它可以解析body中带有urlencoded类型的数据。这个数据会被解析为JSON格式，保存在req.body中。在此示例中，我们接收到的数据结构应该与formData对象相同。

至此，以上两个示例便详细介绍了如何使用axios提交formdata。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：axios post提交formdata的实例 - Python技术站