首页 > 解决方案 > multipart/form-data 使用 axios 发送空数据

问题描述

我正在尝试提出请求,但是,我的身体似乎没有被发送。我制作了一个 API,它可以准确地返回我发送的内容,但是正文返回的是空的。

笔记:

  1. 通过 API,我需要发送 .txt 或 .msg 格式的文件。
  2. 我隐藏了下面的一些信息,因为这是敏感的业务数据。
const axios = require('axios');

async function UploadFile(urlNovaTarefa, siteUrl, clientId, clientSecret, nomeCentral, grupoId, AssuntoId, usuario, solicitante, copia, solicitacao, anexoNome, anexoConteudo, dataEntrada, enviarNotificacao, cnpjPedido, responsavel){
    // formData
    const form = new FormData();
    form.append('NomeCentral', nomeCentral);
    form.append('GrupoId', grupoId);
    form.append('AssuntoId', AssuntoId);
    form.append('Usuario', usuario);
    form.append('Solicitante', solicitante);
    form.append('Copia', copia); 
    form.append('Solicitacao', solicitacao);
    form.append('AnexoNome', anexoNome);
    form.append('AnexoConteudo', anexoConteudo);
    form.append('DataEntrada', dataEntrada);
    form.append('EnviarNotificacao', enviarNotificacao);
    form.append('CNPJPedido', cnpjPedido);
    form.append('Responsavel', responsavel);

    //console.log(form);
    
    let response = await axios.post(urlNovaTarefa, form, {
          headers: {
            'SiteUrl': siteUrl,
            'Client-Id': clientId,
            'Client-Secret': clientSecret,
            'Content-Type': "multipart/form-data; boundary=CSC",
            'Access-Control-Allow-Origin': "*",
          },
        });

        let data = response.data;
        console.log(data);
  }


  UploadFile("https://example.net/ct/csc/novaTarefa", "https://example.com/sites/centralcsc/", "1234-1234-1234-1234", "abcd-abcd-abcd-abcd=", "ServicosClientes", "4", "3", "email@example.com", "email@example.com", "email@example.com", "Test", "Test.txt", "C:\\Users\\User\\Desktop\\Test.txt", "07/10/2021 14:30", "N", "[{\"NumeroCNPJ\":\"12345678910112\",\"NumeroPedido\":[]}]", "email@example.com")
  .then(response => console.log(response))
  .catch(err => console.log(err))

应该在我的身体上发送的内容(表单数据)是这样的:

  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="NomeCentral"\r\n' +
    '\r\n',
  'ServicosClientes',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="GrupoId"\r\n' +
    '\r\n',
  '4',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="AssuntoId"\r\n' +
    '\r\n',
  '3',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="Usuario"\r\n' +
    '\r\n',
  'email@example.com',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="Solicitante"\r\n' +
    '\r\n',
  'email@example.com',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="Copia"\r\n' +
    '\r\n',
  'email@example.com',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="Solicitacao"\r\n' +
    '\r\n',
  'Test',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="AnexoNome"\r\n' +
    '\r\n',
  'Test.txt',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="AnexoConteudo"\r\n' +
    '\r\n',
  'C:\\Users\\User\\Desktop\\Test.txt',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="DataEntrada"\r\n' +
    '\r\n',
  '07/10/2021 14:30',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="EnviarNotificacao"\r\n' +
    '\r\n',
  'N',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="CNPJPedido"\r\n' +
    '\r\n',
  '[{"NumeroCNPJ":"12345678910112","NumeroPedido":[]}]',
  [Function: bound ],
  '----------------------------553386948041586350665922\r\n' +
    'Content-Disposition: form-data; name="Responsavel"\r\n' +
    '\r\n',
  'email@example.com',
  [Function: bound ]
]

这是我的 API 的回报!身体是空的。

 Resultado: 0,
 Mensagem: 'Success',
 Headers: {
   connection: 'Keep-Alive',
   'transfer-encoding': 'chunked',
   accept: 'application/json, text/plain, */*',
   host: 'example.net',
   'max-forwards': '10',
   'user-agent': 'axios/0.23.0',
   'x-client-ip': '000.00.00.000',
   'x-client-port': '00000',
   siteurl: 'https://example.com/sites/centralcsc/',
   'client-id': '1234-1234-1234-1234',
   'client-secret': 'abcd-abcd-abcd-abcd=',
   'access-control-allow-origin': '*',
   'x-waws-unencoded-url': '/ct/csc/novaTarefa',
   'client-ip': '000.00.00.000:00000',
   'x-arr-log-id': 'xxxxxxxxxxxxxxxxxxxx',
   'disguised-host': 'example.net',
   'x-site-deployment-id': 'example',
   'was-default-hostname': 'example.net',
   'x-original-url': '/ct/csc/novaTarefa',
   'x-forwarded-for': '000.00.00.000:00000',
   'x-arr-ssl': '2048|256|C=US, O=Microsoft Corporation, CN=Microsoft RSA TLS CA 02|CN=*.example.net',
   'x-forwarded-proto': 'https',
   'x-appservice-proto': 'https',
   'x-forwarded-tlsversion': '1.2',
   'request-id': '|999999999-99999999999999.1.',
   'content-type': 'multipart/form-data; boundary=CSC'
 },
 Body: {}
}
undefined

标签: node.jsapirestaxiosmultipartform-data

解决方案


您好,欢迎来到 StackOverflow!

我不认为您的代码是错误的,只是您的“我制作了一个 API 可以准确地返回我发送的内容”可能不正确......如果您搜索“post bin”,您会发现很多为您提供临时 URL 的免费服务,以便您可以发送数据并进行检查

其中一项服务是https://hookbin.com/

我刚刚根据您的问题创建了一个非常简单的代码:

const axios = require('axios');
const FormData = require('form-data');

async function UploadFile(dataToUpload) {
   const { clientId, clientSecret } = dataToUpload;
    
   const form = new FormData();
   Object.keys(dataToUpload).forEach(key => form.append(key, dataToUpload[key]));

   const response = await axios({
      method: 'POST',
      url: 'https://hookb.in/nPDl9aLjgVsZ7Qrr7ja6',
      data: form,
      headers: {
         ...form.getHeaders(),
         'Client-Id': clientId,
         'Client-Secret': clientSecret,
      },
   });

   console.log(response.data);
}


(async () => {
    await UploadFile({
        clientId: '1234',
        clientSecret: 'abc',
        nomeCentral: 'ServicoClientes',
        grupoId: '4',
        assuntoId: '5',
        usuario: 'email@example.com',
        solicitante: 'email@example.com',
        copia: 'email@example.com',
        solicitacao: 'teste',
        dataEntrada: '07/10/2021 14:30',
        enviarNotificacao: 'N',
        cnpjPedido: '[{\"NumeroCNPJ\":\"12345678910112\",\"NumeroPedido\":[]}]',
        responsavel: 'email@example.com'
    })
})();

注意上面的代码和下面是一样的,代码风格只是个人喜好

await axios.post('https://hookb.in/nPDl9aLjgVsZ7Qrr7ja6', form, {
  headers: {
     ...form.getHeaders(),
     'Client-Id': clientId,
     'Client-Secret': clientSecret,
  },
});

Hookbin 确实显示了正文中的所有数据

身体截图


只是给你一些关于如何改进你的代码的提示:

  • 函数应该接受最多 3 个输入,除此之外,尝试传递一个对象作为输入,因为它更容易阅读和知道函数需要什么(如果你使用打字稿更好)
  • 每次你重复行时,试着想出一些更简单的东西,在你的例子中,看看我的forEach循环,我只用一行发送 1 或 50 个属性
  • 将日期作为整数发送并将其保存在数据库中而不是格式化日期更容易,因为数据库可能位于不同的国家/地区,您将开始遇到转换问题,请尽可能尝试发送,例如:dataEntrada: Date.now()
  • 与布尔值相同,enviarNotificacao: 'N'最好发送,enviarNotificacao: false因为如果您需要在数据库中索引该值,它将更容易和更快
  • 请记住,form.getHeaders()它将自动在请求上附加正确的标头,无需指定更多,请参阅链接中的标头或下图(以防链接过期)

标题截图


推荐阅读