Multer: Unexpected Field error even though Form Data and upload.single values match

[mjvcallibrity]

I've read through 3 or 4 of the closed issues on this type of problem already, and the solution for all of them was that their form data and upload.single values were not matching. As far as I can tell, I've got matching values, but I'm still running into an Unexpected Field error. My project is a Vue.js/Express application:

Front End

<template>
  <div>
    <input type="file" @change="fileSelected">
    <button @click="onUpload">Upload Photo</button>
  </div>
</template>

<script>
import Axios from 'axios';

export default {
  name: 'PhotosForm',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      photo: null,
    };
  },
  methods: {
    fileSelected(event) {
      this.photo = event.target.files[0];
    },
    onUpload() {
      const formData = new FormData();
      formData.append('photo', this.photo, this.photo.name);
      Axios.post('http://localhost:4000/api/photos/', formData);
    },
  },
};
</script>

Back End

var express = require('express');
var bodyParser = require('body-parser');
var router = express.Router();
var cors = require('cors');
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(upload.array());
app.use(express.static('public'));
app.use(cors());

var port = 4000;

router.post('/photos', upload.single('photo'), function(req, res, next) {
  console.log(req.body);
});

app.use('/api', router);

app.listen(port);
console.log("Server started on " + port);

I've been trying to figure out where I am going wrong for 3 days. Read several tutorials online on how to user Multer. As far as I can tell, I'm using it correctly, but still getting the error. Any help you could provide would be greatly appreciated. Thanks!

[LinusU]

Can you use your browser's developer tools to see what gets sent over the wire?

[cddsgtc]

with the same problem

[LinusU]

@cddsgtc Can you use your browser's developer tools to see what gets sent over the wire?

[cddsgtc]

@LinusU
I have solved it, just because the key words doesn't match the option key words.
maybe the doc need some detail information.

[LinusU]

maybe the doc need some detail information.

I'd be happy to have it improved! What was it that got you?

[cddsgtc]

@LinusU
im a newbie for node.js and also a coder that English is not my mother language.
what got me is that maybe it should be design like that.
im good at front-end programming.

[LinusU]

Was the problem that you have misspelled one of the option names? I'm not sure how we could improve the documentation there 🤔

[ThomasGHenry]

Logging the unexpected field would help (sanitized, of course).

[kestonorherhe]

@LinusU
I have solved it, just because the key words doesn't match the option key words.
maybe the doc need some detail information.

Thanks, this solved it for me too. The docs really need to be updated.

[LinusU]

@kestonorherhe

The docs really need to be updated.

Which part is wrong in the documentation? Would you be able to submit a PR to fix/improve it?

[oxenprogrammer]

Getting the same error, I am testing on postman, I don't have a front end yet.

[oxenprogrammer]

Sorry, I was also not passing the image name, it is now fine

[jonchurch]

Closing as resolved/inactive