我需要一次使用axios上传许多文件，因为FormData API，我挣扎了一段时间:

// const instance = axios.create(config);

let fd = new FormData();
for (const img of images) { // images is an array of File Object
  fd.append('images', img, img.name); // multiple upload
}

const response = await instance({
  method: 'post',
  url: '/upload/',
  data: fd
})

我没有指定content-type: multipart/form-data头!

在axios中使用application/x-www-form-urlencoded格式

默认情况下，axios将JavaScript对象序列化为JSON。发送数据 在application/x-www-form-urlencoded格式中，您可以使用 以下选项之一。

浏览器

在浏览器中，你可以像下面这样使用URLSearchParams API:

const params = new URLSearchParams();

params.append('param1', 'value1');

params.append('param2', 'value2');

axios.post('/foo', params);

请注意，URLSearchParams不是所有浏览器都支持的(参见caniuse.com)，但有一个可用的polyfill(确保填充全局环境)。

或者，你可以使用qs库编码数据:

const qs = require('qs');

axios.post('/foo', qs.stringify({ 'bar': 123 }));

或者用另一种方式(ES6)，

import qs from 'qs';

const data = { 'bar': 123 };

const options = {

  method: 'POST',

  headers: { 'content-type': 'application/x-www-form-urlencoded' },

  data: qs.stringify(data),

  url, };

axios(options);

你可以通过使用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问题:

不能得到一个。post与'Content-Type': 'multipart/form-data'工作@ axios/axios

当需要从NodeJS环境中使用axios POST x-www-form- urlenencoded数据时，这应该工作得很好。您可能需要向配置中添加一个授权标头。如果端点需要身份验证，则返回头对象。

const config = {
  headers: {
    accept: 'application/json',
    'cache-control': 'no-cache',
    'content-type': 'application/x-www-form-urlencoded'
  }

const params = new URLSearchParams({key1: value1, key2: value2});

return axios
  .post(url, params.toString(), config)
  .then((response) => {
    return response.data;
  })
  .catch((error) => console.error(error));

对我来说，它使用axios, typescript和form-data(v4.0.0)工作:

import FormData from "form-data";
import axios from "axios";

async function login() {
  var data = new FormData();
  data.append("User", "asdf");
  const return = await axios.post(
    "https://ptsv2.com/t/1q9gx-1652805776/post", data,
    { headers: data.getHeaders() }
  );
  console.log(return);
}

上传(多个)二进制文件

node . js

当您想通过多部分/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()
})

而不是头:{'Content-Type': 'multipart/form-data'}我更喜欢头:formData.getHeaders() 我在上面使用了async和await，如果你不喜欢它们，你可以将它们更改为简单的Promise语句 为了添加你自己的头文件，你只需要头文件:{…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)