title: axios request for image upload is not working from vue.js but working from postman
body: <p>I am using multer library for uploading image</p>
  <p>this is my uploadFile.js</p>
  <pre><code>const multer = require(&quot;multer&quot;);
  const path = require(&quot;path&quot;);
  // storage engine 
  export const storage = multer.diskStorage({
    destination: './upload/images',
    filename: (req: any, file: any, cb: any) =&gt; {
      return cb(null, `${file.fieldname}_${Date.now()}${path.extname(file.originalname)}`)
    }
  })
  export const upload = multer({
    storage: storage,
    limits: {
      fileSize: 1000000
    }
    })
  </code></pre>
  <p>this is my vue.js file</p>
  <pre><code>&lt;template&gt;
    &lt;form @submit.prevent=&quot;onSubmit&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;div class=&quot;input&quot;&gt;
        &lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;name&quot; v-model=&quot;name&quot; /&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;input&quot;&gt;
        &lt;label for=&quot;photo&quot;&gt;photo&lt;/label&gt;
        &lt;input
          style=&quot;display: none&quot;
          type=&quot;file&quot;
          name=&quot;file&quot;
          id=&quot;photo&quot;
          @change=&quot;onFileSelected&quot;
          ref=&quot;fileInput&quot;
        /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;submit&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;md-primary md-raised&quot;&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  import request from &quot;../../utils/request&quot;;
  import FormData from &quot;form-data&quot;;
  
  export default {
    data() {
      return {
        name: &quot;&quot;,
        selectedFile: null,
      };
    },
    methods: {
      onFileSelected(event) {
        this.selectedFile = event.target.files[0];
      },
      onSubmit() {
     const formData = new FormData();
        formData.append(&quot;file&quot;, this.selectedFile);
        formData.append(&quot;data&quot;, this.name);
        console.log(this.selectedFile);
        const res = request({
          url: &quot;/project/create&quot;,
    formData,
          // headers: {
          //   &quot;Content-Type&quot;: &quot;multipart/form-data&quot;,
          // },
          //        headers: {
          //   'accept': 'application/json',
          //   'Accept-Language': 'en-US,en;q=0.8',
          //   'Content-Type': `multipart/form-data; boundary=${fd._boundary}`,
          // },
          method: &quot;post&quot;,
        });
        console.log(res);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>in route using middleware</p>
  <pre><code>middlewares: [
              upload.single('file'),
          ],
  </code></pre>
  <p>this is my controller file</p>
  <pre><code>export const CreateController = async (req: Request, res: Response) =&gt; {
      console.log(&quot;baseurl&quot;, req.baseUrl)
     console.log(&quot;headers&quot;, req.headers)
      console.log(&quot;profile&quot;, req.file)
      res.json({
          success: &quot;uploaded&quot;,
         // profile_url: `http://localhost:5005/profile/${req.file.filename}`
      })
  }
  </code></pre>
  <p>for above code i am getting req.file undefined and getting headers as :</p>
  <pre><code>    'x-forwarded-host': 'localhost:4000',
        'x-forwarded-proto': 'http',
        'x-forwarded-port': '4000',
        'x-forwarded-for': '127.0.0.1',
        cookie: 'rTFdNeE1EY3lpTSJ9; express:sess.sig=xs4Q-LVeSKTj5SAvax869CN9hww; ui- 
    localhost%3A8091=27b9bf',
        'accept-language': 'en-US,en;q=0.9',
        'accept-encoding': 'gzip, 
      deflate, br',
        referer: 'http://localhost:4000/project/create',      
        'sec-fetch-dest': 'empty',  'sec-fetch-mode': 'cors', 
        'sec-fetch-site': 'same-origin',
        origin: 'http://localhost:4000',
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
        Chrome/90.0.4430.212 Safari/537.36',      
        'sec-ch-ua-mobile': '?0', 
        accept: 'application/json, text/plain, */*',
        'sec-ch-ua': '&quot; Not A;Brand&quot;;v=&quot;99&quot;, &quot;Chromium&quot;;v=&quot;90&quot;, &quot;Google Chrome&quot;;v=&quot;90&quot;',  
        'content-length': '0',    
        connection: 'close',      
        host: 'localhost:5005'    
      }
  </code></pre>
  <p>but from postman i am getting req.file like this</p>
  <pre><code>fieldname: 'file',
    originalname: 'ninjaCoder.png',
    encoding: '7bit',
    mimetype: 'image/png',
    destination: './upload/images',
    filename: 'file_1621371140733.png',        
    path: 'upload\\images\\file_1621371140733.png',
    size: 169423
  </code></pre>
  <p>can anyone help to get out of this issue?
  i am using vue version 2.6.12
  and node js v14.16.1</p>
  <p>thanks in advance.</p>