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

Question

我不知道为什么我在服务器上收到 [错误：多部分：未找到边界] 和 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

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 - Can't get a .post with Content-Type...
• github.com - Better solution using axios, form-data, fs
• https://stackoverflow.com/a/47630754/3332734

Answer 2

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

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

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

Answer 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'。

Answer 4

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