Question

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

我希望我一直很有用！：）

参考文献：

Answer 2

我通过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);

正如上面的注释所提示的那样，请使用 Dev Tools>网络标签> XHR标签检查您的请求标头，并确保您的内容类型为application/json或{{1} }（用于常规格式提交），如果您正在上传文件，则application/x-www-form-urlencoded。

Answer 3

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

def search(): city = city_text.get() weather = get_weather(city) if weather: location_lbl['text'] = '{}, {}'.format(weather[0], weather[1]) temp_lbl['text'] = '{:.2f}°C {:.2f}°F'.format(weather[2], weather[3]) weather_lbl['text'] = weather[5] img1 = ImageTk.PhotoImage(file=f"C:/Users/Alon/PycharmProjects/Weather_app/weather_icons/{weather[4]}.png") image['image'] = img1 image.image = img1 else: messagebox.showerror('Error', 'Cannot find city: "{}"'.format(city))，

标头，以便Fetch api自动设置标头即可。试试吧

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

3 个答案:

实例化新的`FormData`实例。

使用`concat`和`concat-stream`

使用`promise`

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

3 个答案:

实例化新的FormData实例。

使用concat和concat-stream

使用promise

实例化新的`FormData`实例。

使用`concat`和`concat-stream`

使用`promise`