VueJS通过Axios上传文件至NodeJS后端无法接收文件求解决方案

问题排查及修复方案 #

1. 前端文件获取逻辑错误 #

你往FormData里添加的是input DOM节点本身，不是选中的文件对象，修改如下：

// 原错误代码
formData.append("file", document.getElementById("input-file"))
// 修改为
formData.append("file", document.getElementById("input-file").files[0])
// 用你声明的ref写法更规范：
// formData.append("file", this.$refs.file.files[0])

另外不需要手动设置Content-Type: multipart/form-data，axios发送FormData时会自动填充该请求头并附带正确的boundary分隔符，手动设置反而可能因为缺少boundary导致解析失败。

2. axios封装逻辑错误 #

你封装的executePostRequest函数将传入的FormData额外包装了一层JSON对象，导致发送的请求体不再是符合要求的FormData格式，同时签名逻辑对FormData不生效：

// 原错误逻辑
const paramsPost = {
    data: params,
    token: postToken
}
instance.post(url, paramsPost)

修复方案：

如果是上传文件的场景，直接将FormData作为请求体发送，token可以追加到FormData中，或者放到请求头里：

// 先判断传入的params是不是FormData类型
let postData
if (params instanceof FormData) {
    postData = params
    // 把token追加到FormData里适配后端校验
    postData.append('token', postToken)
} else {
    postData = {
        data: params,
        token: postToken
    }
}
instance.post(url, postData)

如果你的签名逻辑不支持FormData，可以把签名后的token放到自定义请求头里传递，避免破坏FormData结构。

3. 后端路由方法不匹配 #

前端发送的是POST请求，后端写的是GET路由，完全无法匹配请求，修改后端路由：

// 原错误代码
UserRouter.get("/upload", (req, res) => {
// 修改为
UserRouter.post("/upload", (req, res) => {

4. 后端缺少文件解析中间件 #

Express/Koa等Node框架默认不会解析multipart/form-data类型的请求体，你需要安装对应的中间件才能拿到文件对象，以Express常用的multer中间件为例：

1. 先安装依赖：npm i multer
2. 配置路由解析：

const multer = require('multer')
// 配置文件临时存储路径
const upload = multer({ dest: 'uploads/' })
// 单文件上传用single方法，参数是FormData里的文件字段名，对应你前端append的"file"
UserRouter.post("/upload", upload.single('file'), (req, res) => {
  // 单文件用req.file获取，多文件上传用req.files获取
  console.log(req.file);
  res.send("ok");
});

内容的提问来源于stack exchange，提问作者Brice Mabillard