Upload file with vue and receive it nodejs

Question

I am trying to upload a file to the server with vuejs, actually i don't want the form to treat the file and upload it, i prevent the submit and treat some logic by myself, so at the begin i want to do something simple just check if it is a pdf and if everything is ok it should point to /upload in the localhost defined for NodeJS server

<template>
  <div id="app">
    <form>
      <h2>Select a file</h2>
      <input id="inputVal" type="file" @change="onFileChange">
      <button @click.prevent="sendFile()">Send</button>
    </form>
  </div>
</template>

<!-- Javascript -->
<script>
  export default {
    name: 'app',
    data() {
      return {
        file: ''
      }
    },
    methods: {
      onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) {
          return;
        }
        var ext = files[0].name.split('.').pop();
        if(ext === 'pdf') {
          this.createFile(files[0]);
        }
        else {
          this.file = '';
          this.clearFileInput(document.getElementById('inputVal'));
        }
      },
      createFile(file) {
        this.file = file;
      },
      clearFileInput(ctrl) {
        try {
          ctrl.value = null;
        } catch(ex) { }
        if (ctrl.value) {
          ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
        }
      },
      sendFile() {
        var vm = this;
        if(this.file !== '') {
         this.$http.post('http://localhost:3000/upload',{params: vm.file, headers: {'Content-Type': 'multipart/form-data'}})
        .then(response => {
          // JSON responses are automatically parsed.
          //
        }, error => {
          //this.errors.push(e)
        });
      }
    }
  }
}
</script>

on my server side i am receiving undefined, i don't really know why, i just wanna see if i really got any file in the server, and if yes i want to save it on the server side, any help with that?

i just did this on the /upload endpoint:

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

Shouldn't it be req.body since it's an object in request not response. req = request, res = response. — Adrian
– Adrian, Commented Sep 14, 2017 at 15:59
{ params: { file: {} }, headers: { 'Content-Type': 'multipart/form-data' } } — costa costa
– costa costa, Commented Sep 14, 2017 at 16:04

Shyam Babu · Accepted Answer · 2017-09-14 17:13:47Z

1

You will get Files object from input which is not the actual file but a special reference to a file, you need to useFileReader or FormData to get the actual file and send it, try something like this

var data = new FormData();
var pdf = e.target.files[0];
data.append('file',pdf)
this.$http.post('http://localhost:3000/upload',{params: data}, headers: {'Content-Type': 'multipart/form-data'}})

answered Sep 14, 2017 at 17:13

Shyam Babu

1,0797 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload file with vue and receive it nodejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related