Using Upload in Express Nodejs with Multer

Question

I want to create a middleware and instantiate in my "server.js" file the file upload option..

That done, I configured my server.js as follows.

"use strict";

import express from 'express';
import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';
import dotenv from 'dotenv';
import {
  i18n
} from './i18n';
import routes from './routes';
import bodyParser from 'body-parser';

var multer = require('multer');
var upload = multer({dest: "../public/storage/app/uploads"});
const path = require('path');
dotenv.config();

global.logger = function (args) {  
  console.log("-------------------------------------------------");  
  for (var arg = 0; arg < arguments.length; ++arg) {
    var arr = arguments[arg];
    console.log(`${arr}`);
  }
  console.log("-------------------------------------------------");
}

class App {
  constructor() {
    this.express = express();
    
    this.middlewares();
    this.routes();
        
    // Method 1
    const nDate = new Date().toLocaleString('en-US', {
      timeZone: process.env.TZ
    });

    const server = this.express.listen(process.env.PORT || 3000, () => {
      console.log(`Welcome to Marketplace => PORT ${process.env.PORT || 3000} -> ${nDate}`);
    });
  }

  middlewares() {
    this.express.use(cors({
      origin: process.env.CORS_ORIGIN || '*'
    }));
    this.express.use(helmet());
    this.express.use(morgan('dev'));
    this.express.use(express.json());
    this.express.use(express.static(path.join(__dirname, 'public')));
    // for parsing application/json
    this.express.use(bodyParser.json());
    // for parsing application/xwww-
    this.express.use(bodyParser.urlencoded({
      extended: true
    }));
    //form-urlencoded
    // for parsing multipart/form-data
    this.express.use(upload.array());    

    let appExpress = this.express;
    i18n.init({
      appExpress
    });
  }

  routes() {
    this.express.use(routes);
  }
}
export default new App().express;

My file routes.js

import { Router } from 'express';
let routeUsers = Router();
routeUsers.put("/:token", Users.update.bind(Users));

And my frontend request via axios send the data using FormData, my payload example is:

email: [email protected]
website: mkmm
twitter: twotter
instagram: instagram
files[image_cover]: (binary)
files[image_profile]: (binary)

The problem is being when I'm submitting a form that contains an input file.

I have the following error return

MulterError: Unexpected field
    at wrappedFileFilter (C:\Projetos\marketplace\backend\node_modules\multer\index.js:40:19)
    at Busboy.<anonymous> (C:\Projetos\marketplace\backend\node_modules\multer\lib\make-middleware.js:115:7)
    at Busboy.emit (node:events:526:28)
    at Busboy.emit (node:domain:475:12)
    at Busboy.emit (C:\Projetos\marketplace\backend\node_modules\busboy\lib\main.js:38:33)
    at PartStream.<anonymous> (C:\Projetos\marketplace\backend\node_modules\busboy\lib\types\multipart.js:213:13)
    at PartStream.emit (node:events:526:28)
    at PartStream.emit (node:domain:475:12)
    at HeaderParser.<anonymous> (C:\Projetos\marketplace\backend\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (node:events:526:28)

How can I do to fix this?