Vue.js, try to upload a single file asynchonously (Vue.js / Node.js)

Question

My goal looks simple, but I try to upload a single file, asynchronously, using Vue.js (and axios, for instance). It seems to work as long as I don't try to handle the upload at server side. When I 'plug' my server code I get error 500 and no clue to find out what's going on.

My HTML :

<form action="#" enctype="multipart/form-data">
    <input type="file" name="files[]" v-on:change="onFileChange">
</form>

My Vue.js script :

onFileChange: function(event) {
  var image = new Image();
  var reader = new FileReader();

  reader.addEventListener('load', function(){
    console.log('file readed : ');

    axios.post('/upload_file', reader.result, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
});
reader.readAsDataURL(event.target.files[0]);

},

My Node.js server code :

router.post('/upload_file', function(req, res) {
  var form = new formidable.IncomingForm();
  form.IncomingForm().parse(req) // this line create Error #500
    .on('file', function(name, file) {
        console.log('Got file:', name);
    })
    .on('field', function(name, field) {
        console.log('Got a field:', name);
    })
    .on('error', function(err) {
        console.log('Got a error:');
        next(err);
    })
    .on('end', function() {
        res.end();
    });
  res.end();
});

I spent a day on this, file upload is just my nightmare, any help will be appreciated (and sorry for my english).

Lars Schinkel · Accepted Answer · 2018-02-01 22:22:52Z

2

I'm not familiar with the node part. But in Vue I would do this:

onFileChange: function(event) {
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.addEventListener('load', function(data) {
    axios.post('/upload_file', {
        data: data.target.result
    });
});

So basically add "data" as parameter in die file readers event listener function and "data.target.result" to transfer the file data.

answered Feb 1, 2018 at 22:22

Lars Schinkel

82110 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Vue.js, try to upload a single file asynchonously (Vue.js / Node.js)

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