如何正确发送数据 axios 错误：多部分：未找到边界

Posted 2023-02-21

【中文标题】如何正确发送数据 axios 错误：多部分：未找到边界

【英文标题】：How to send data correct axios Error: Multipart: Boundary not found

【发布时间】：2018-09-09 19:16:12

【问题描述】：

我不知道为什么我在服务器上收到 [错误：多部分：未找到边界] 和 bundle.js:37628 POST http://localhost:8800/exporttocsv 500（内部服务器错误） 当我通过

发帖时

<form action="/exporttocsv" method="POST"  encType="multipart/form-data">

post 可以正常工作，但通过axios 不起作用。

请帮我改正错误

这是我的代码 /--客户端

import axios from 'axios'
var formData = new FormData()

const config =  headers:  'Content-Type': 'multipart/form-data'  ;
export const ipmortToCSV = (file) => dispatch => 

formData.append('file',file)
console.log(formData.getAll('data'))

axios.post('/exporttocsv', 
          "UploadCommand": formData
      ,config)
      .then(function (response) 
        console.log(response);
      )
      .catch(function (error) 
        console.log(error);
      );

//--服务器

const router = require('express').Router()
var csv = require('csv-express')
const controllers = require('../../controllers/exporttocsv')
var multer  = require('multer')
var upload = multer(dest : 'exporttocsv/')

router.get('/', (req, res) => 
      controllers.exportToCsv(req,res)
  )
router.post('/',upload.single('file'),(req,res) =>  
    //controllers.importToCsv(req,res)
)

module.exports = router

【参考方案1】：

你可以这样做......

实例化一个新的FormData 实例。

const config =  headers:  'Content-Type': 'multipart/form-data'  ;
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)

使用concat 和concat-stream

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => 
  axios.post("/hello", data, 
    headers: fd.getHeaders()
  )
))

使用promise

const promise = new Promise((resolve) => 
  const fd = new FormData();
  fd.append("hello", "world");
  fd.append("file", fs.createReadStream(binaryFile));
  fd.pipe(concat( encoding: 'buffer' , data => resolve( data, headers: fd.getHeaders() )));
);
promise.then(( data, headers ) => axios.post('/hello', data,  headers ));

我希望我有用！ :)

参考资料：

github.com - Can't get a .post with Content-Type... github.com - Better solution using axios, form-data, fs https://***.com/a/47630754/3332734

【讨论】：

嗨，你能帮我解决这个问题吗？ ***.com/questions/54978454/…

好的，希望能帮到你:)

如果您有更多标头要添加到请求中怎么办？

【参考方案2】：

我一直在努力解决通过 fetch api 调用到 nestjs 服务器时找不到多部分边界的问题。我尝试的是删除

'Content-Type': 'multipart/form-data',

headers 以便 Fetch api 自动设置标题并且它工作。试试看

【参考方案3】：

我在通过 javascript 使用 Axios 时遇到了这个问题，因为 content-type 标头是 multipart-form-data 但缺少边界。

根据我的研究，处理它的一个好方法是允许 Axios 自动检测内容类型并自行正确设置标题。

以下是如何实现此目的的想法：

const formDataWithFiles = hasFiles ? new FormData() : undefined;

if (formDataWithFiles) 
    // axios will automatically set the content-type to multipart/form-data if the
    // data param is a FormData object
    // otherwise, it will use application/json
    // (study the Dev Tools > Network tab > XHR tab headers)
    Object.keys(modifiedFields)
        .forEach(field => formDataWithFiles.append(field, modifiedFields[field]));


const  data  = await axios(
    method,
    url: actionUrl,
    data: hasFiles ? formDataWithFiles : modifiedFields,
    headers: 
        ...axios.defaults.headers,
        ...headers,
    ,
);

return data;

上面的代码是一个通用的handleSubmit函数，可以在客户端的任何地方调用。

这是函数签名：

const  data  = await this.submitForm(
    actionUrl: this.actionUrl,
    method: this.method,
    modifiedFields: 
        ...this.modifiedUser,
    ,
    hasFiles: true,
);

在上面的代码中，有两个用例。第一种是默认情况，正常有效负载通过平面对象发送。第二种情况是表单有文件并且您想要multipart/form-data。在这种情况下，我们使用FormData 对象作为容器来指示 Axios 自动检测必要的标头并设置正确的边界。

如果您没有正确指定标头，可能会在 Laravel 或任何服务器（例如 node.js）中接收到一个空的 $request->all() 数组。

对我的回答的简短回答是使用 FormData 对象，因为它包含的信息比普通的旧 JavaScript 对象更多。有了它，你还可以访问：

const formData = new FormData();

console.log('boundary:', formData._boundary);

正如我上面的注释所暗示的，使用 Dev Tools > Network 选项卡 > XHR 选项卡 检查您的请求标头并确保您的内容类型为 application/json 或 application/x-www-form-urlencoded 用于常规形式如果您正在上传文件，则提交和multipart/form-data'。

【讨论】：

谢谢。这很有帮助！

【参考方案4】：

对我来说，主要原因是 OP 做了什么；将 axios.post 的 data 参数作为对象 ( key: formDataObj) 发送，而不是直接将 formDataObj 作为 arg。