使用antd的upload组件上传到后端（使用node的multer），为什么会报Boundary not found？

Question

恳求大佬帮忙看下，我前端使用的是upload组件上传图片，后端配合node的multer接收，但是图片上传之后的报错如下图

前端代码如下

 <Upload
     showUploadList={false}
     action='/api/users/update-avatar'
     className='upload-avatar'
     headers={{
        'Content-Type': 'multipart/form-data',
      }}
  >
       <EditOutlined className='edit-logo' />
  </Upload>

nodejs代码如下

var express = require('express')
var router = express.Router()
const userController = require('../controllers/users')
const multer = require('multer')

const upload = multer({ dest: 'public/avatars/' })

router.post('/update-avatar',
  upload.single('avatar'),
  userController.updateAvatar
)

module.exports = router

至于userController.updateAvatar 我理解根本没走到这里就报错了
传参页面是这样的

看到网上有一种解决方法是吧header去掉，但是去掉headers之后会进一步报下面的错

传参页面就成了这种

Answer 1

为什么会报Boundary not found？

上传文件不要手动设置'Content-Type': 'multipart/form-data'。原因可参考利用fetch上传文件

看到网上有一种解决方法是吧header去掉，但是去掉headers之后会进一步报下面的错

upload.single('avatar')的参数和请求FormData中file表单的name不一致。试试这样：

<Upload
  name="avatar"
  showUploadList={false}
  action='/api/users/update-avatar'
  className='upload-avatar'
>
  <EditOutlined className='edit-logo' />
</Upload>

Answer 2

参考

• node.js - express (using multer) Error: Multipart: Boundary not found, request sent by POSTMAN - Stack Overflow
• https://stackoverflow.com/questions/51697944/how-to-send-multipart-form-data-with-antd-upload-react

推理过程

• 你的 request header 中的 content-type 不是后端需要的 multipart/form-data
• 虽然你的代码设置了自定义 header，但是 AntD 的 Upload 组件并不支持（看上面第 2 个链接，好像需要你使用 customRequest 才可以）