使用axios上传文件时将req.body和req.file设为空

Question

这里是前端：

let file = this.$refs.file.files[0] //"this" refers to vue
  let data = new FormData();
  data.append("image", file, file.fileName);
  data.append("content", this.content);
  data.append("title", this.title);
  data.append("action_type", "add_article");

  axios
    .post("http://localhost:3000/api", data, {
      headers: {
        // "accept": "application/json",
        // "Accept-Language": "en-US,en;q=0.8",
        // "Content-Type": `multipart/form-data; boundary=${data._boundary}`,
        // "auth": util.getCheckedToken(),
        'content-type': 'multipart/form-data'
      }
    })
    .then(response => {
      alert("success!", response);
    })
    .catch(error => {
      alert("fail!", error);
    });

后端的某些部分：

app.use(multer({
  storage: multer.diskStorage({
    destination: (req, file, cb) => { cb(null, '../static/images'); },
    filename: (req, file, cb) => { cb(null, my_random.fileName(file.originalname)); }
  }),
  fileFilter: (req, file, cb) => { cb(null, "image/png image/jpg image/jpeg".split(' ').includes(file.mimetype)); }
}).single('image'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

请参阅我正在使用的工具的标签。我没有收到错误消息，并且req.file和req.body为空。问题可能是什么原因？

Answer 1

尝试发送文本/ csv文件时遇到类似的问题，此问题已通过在路由之前解析内容类型来解决。像这样：

app.use(bodyParser.raw({type: multipart/form-data}));

之前

app.use(multer({}))

bodyParser.raw（[options]）返回将所有主体解析为缓冲区的中间件，并且仅查看Content-Type标头与类型选项匹配的请求