multer : req.file is undefined

Question

I want to send a file with axios, from my Vue.js to my Node.js, but the req.file parameter is never filled, it's undefined Here is the simplified code from my vue :

Inscription.vue :

<template>
  <div class="main_content">
  <h1>Inscription</h1>
  <div><input type='file' @change='openFile'></div>
  <button type='button' v-on:click="inscription" class="inscription">Inscription</button>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
data () {
     return { selectedFile: null}
},
methods:{
    openFile (event) {
        this.selectedFile = event.target.files[0];
    },
    inscription () {
      let fd = new FormData();
      fd.append('avatarBase64', this.selectedFile);
      Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', {avatarBase64: fd});
    }
}

My simplified node.js application :

main.ts

import express from "express";
var cors = require('cors');
var bodyParser = require('body-parser')
const multer = require('multer')
const http = require('http');

const server = express();
server.use(cors({origin: true}))
server.use(bodyParser.json({limit: '50mb', extended: true}));
server.use(
    bodyParser.urlencoded({
      extended: true
    })
  )

server.post("/api/testUploadImage", upload.single('avatarBase64'), async (req: any, res: any) => {
    // req.file is undefined PROBLEM THERE
});

const httpServer = http.createServer(server);
httpServer.listen(port);

Maybe it can help: https://stackoverflow.com/questions/35851660/multer-req-file-always-undefined?rq=1 — Michael Rovinsky, Apr 25 '21 at 13:33
in my req I see a req.body.avatarBase64 with juste a __proto__ object but the rest is empty, and the req.file is undefined : https://ibb.co/Q8R0md5 — Jesus, Apr 25 '21 at 13:39
Hi Michael, i saw this post, but i am not in a form in this situation, maybe i am forced to be in a html form to send a file ? — Jesus, Apr 25 '21 at 13:40
Did you try `server.post(...).then(...)` instead of passing handler as an argument? — Michael Rovinsky, Apr 25 '21 at 13:45
doesnt change, my req.file is still undefined, thanks for the proposition — Jesus, Apr 25 '21 at 13:52

score 2 · Answer 1 · answered Apr 25 '21 at 15:39

2

try changing headers of axios with

'content-type': 'multipart/form-data'

answered Apr 25 '21 at 15:39

Mòe

269
2
7

Thx Moe, i tried and i got a new error 'Boundary no found' and the solution to this error is to remove the 'content-type': 'multipart/form-data', so i go round in circles – Jesus Apr 25 '21 at 17:50

score 0 · Answer 2 · answered Apr 25 '21 at 18:16

0

I found out : i was sending this

Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', {avatarBase64: fd});

instead of this :

Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', fd);

answered Apr 25 '21 at 18:16

Jesus

35
6

score 0 · Answer 3 · answered Apr 26 '21 at 12:30

0

change your multer version and try it agian

npm i multer@2.0.0-rc.2

and edit this:

    Axios.create({baseURL: 'http://localhost:4444'}).post('/api/testUploadImage', fd);

answered Apr 26 '21 at 12:30

daniel

89
1
4

multer : req.file is undefined

3 Answers3