如何发送正确的数据 axios 错误:多部分:找不到边界

Question

我不知道为什么我在服务器上收到[错误：多部分：找不到边界]和捆绑.js：37628 POST http://localhost:8800/exporttocsv 500(内部服务器错误) 当我通过发布时

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

开机自检工作正常，但通过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

Answer 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 - 无法获取内容类型的 .post ...
• github.com - 使用公理，表单数据，FS的更好解决方案
• https://stackoverflow.com/a/47630754/3332734

Answer 2

我一直在努力解决调用 nestjs 服务器的获取 api 找不到多部分边界的问题。我试图删除

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

标头，以便 Fetch api 自动设置标头并且它起作用。试试看

Answer 3

默认情况下，axios 不会将边界附加到内容类型标头。您必须手动执行此操作：

axios.post(`${this.baseUrl}/${path}`, formData, {
headers: {
'Content-Type': `multipart/form-data; boundary=${formData.getBoundary()}`,
},
})

如果您与 spring 服务器交谈，这一点尤其重要。

在其他情况下，您将看到异常：

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

Answer 4

我通过 JavaScript 在 Axios 上遇到了这个问题，因为内容类型标头是多部分表单数据，但边界丢失了。

根据我的研究，处理它的一个好方法是允许 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);

正如我上面的注释所提示的那样，使用"开发工具">"网络"选项卡>"XHR"选项卡检查请求标头，并确保具有常规表单提交的内容类型application/json或application/x-www-form-urlencoded，如果要上传文件，则multipart/form-data'。

Answer 5

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

Answer 6

对我来说，添加以下代码来修复它。

axios.post('/xxx/Upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
transformRequest: (data) => {
return data
},
})

Answer 7

好的，我想分享我的解决方案，因为我在这个问题上挣扎了将近一天。该问题是由不正确的包版本引起的。在 27.0.0 左右，对表单数据发送进行了一些更改，这导致了边界问题。我不确定你们使用的是哪个版本，但可能值得检查这是否是您问题的原因。

https://github.com/axios/axios/issues/4631

Answer 8

Axios v0.27.x 无法自动计算多部分/表单数据的边界。我也面临着同样的问题。

请将您的版本更新为 v1.x.x(我在写答案时有 v1.3.4)

查看此线程以获取更多详细信息 - https://github.com/axios/axios/issues/4631

希望这对您或其他人有所帮助。谢谢！

快乐编码：-)