javascript - Netlify functions post request gets parsed locally but getting bad request error when deployed on the internet

Question

I am handling a post request containing multipart/form-data in a netlify function using the following code:

const express = require('express');
const serverless = require('serverless-http');
const bodyparser = require('body-parser');
const multipart = require('connect-multiparty');
const MultipartMiddleWare = multipart({uploadDir:'./uploads'});
const cors = require('cors');

const app = express();
app.use(cors())

const router = express.Router();
router.get('/', (req,res) => {
    res.json({
        "Res" : "Result"
    })
});

router.post('/upload',MultipartMiddleWare,(req,res) => {

    let tempFile = req.files.upload;

    res.json({
        uploaded: true,
        url: 'Test URL'
    })
})

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

module.exports.handler = serverless(app)

This is how to request looks like:

If I run the function locally using netlify-lambda serve, the request gets parsed and I get the correct response, i.e.,

{
   uploaded: true,
   URL: 'Test URL'
}

But when I deploy the function on the cloud get 400 Bad Request error:

This is the react code which makes the request:

<CKEditor 
                editor={ClassicEditor}
                data='<p>Hello World</p>'
                onChange={(event,editor) => {
                    setHtml(editor.getData());
                    console.log(html)
                }}
                config={
                    {
                        ckfinder: {
                            uploadUrl:'https://netlify-express-test2.netlify.app/.netlify/functions/api/upload'
                        }
                    }
                }
            />

Thanks ahead of time.