您可以使用FormData()发布 axios 数据，例如：

var bodyFormData = new FormData();

然后将字段添加到您要发送的表单中：

bodyFormData.append('userName', 'Fred');

如果您要上传图片，您可能需要使用 .append

bodyFormData.append('image', imageFile); 

然后你可以使用 axios post 方法（你可以相应地修改它）

axios({
  method: "post",
  url: "myurl",
  data: bodyFormData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

相关的 GitHub 问题：

无法获得带有 'Content-Type': 'multipart/form-data' 的 .post 来工作@axios/axios

在我的情况下，我必须将边界添加到标题中，如下所示：

const form = new FormData();
form.append(item.name, fs.createReadStream(pathToFile));

const response = await axios({
    method: 'post',
    url: 'http://www.yourserver.com/upload',
    data: form,
    headers: {
        'Content-Type': `multipart/form-data; boundary=${form._boundary}`,
    },
});

如果您使用 React Native，此解决方案也很有用。

查看查询字符串。

您可以按如下方式使用它：

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

上传（多个）二进制文件

节点.js

当您想通过 发布文件时事情变得复杂multipart/form-data，尤其是多个二进制文件。下面是一个工作示例：

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

• 而不是headers: {'Content-Type': 'multipart/form-data' }我更喜欢headers: formData.getHeaders()
• 我使用async及await以上，如果您不喜欢它们，可以将它们更改为普通的 Promise 语句
• 为了添加您自己的标题，您只需 headers: { ...yourHeaders, ...formData.getHeaders() }

新增内容如下：

浏览器

浏览器FormData不同于 NPM 包“form-data”。以下代码在浏览器中对我有用：

HTML：

<input type="file" id="image" accept="image/png"/>

JavaScript：

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

2020 ES6 的做法

将 html 中的表单绑定到数据中，如下所示：

数据：

form: {
   name: 'Joan Cap de porc',
   email: 'fake@email.com',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

提交时：

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}