Accessing data sent as FormData using Axios

Question

I have an application written in VueJS where I send a file, that the user uploads, to the backend. To do this I'm using Axios and I'm sending the file as a FormData. The problem is that I don't know how to access the fields in FormData when I'm in the backend.

I've sent a file using axios like this:

onUpload(): void {
    if(this.fileChosen){
      const fd = new FormData();
      fd.append('file', this.selectedFile, this.selectedFile.name);
      axios.post('http://localhost:8080/routes', fd, {
        onUploadProgress: uploadEvent => {
          console.log('Upload Progress' + Math.round(uploadEvent.loaded / uploadEvent.total) * 100 + " %");
        }
      })
      .then(
        res => {
          console.log(res);
        });
    } else {
      this.fileMsg = "You haven't chosen a file";
    }
  }
}

Then in my backend I want to access this file that I sent:

app.post('/routes', function(req, res){
    res.set("Access-Control-Allow-Origin", "*");
    // Here I want to access my file! But how?
});

https://stackoverflow.com/questions/4295782/how-do-you-extract-post-data-in-node-js — node_man, Nov 02 '18 at 17:44
@pravinnavle I've tried this before but when I console.log(req.body.file) it comes out as undefined and console.log(req.body) comes out as { } — M. H, Nov 02 '18 at 17:57

Pedro Silva · Accepted Answer · 2018-11-02T18:31:30.410

I had problems with using axios for file uploading so you can use the module superagent (https://github.com/visionmedia/superagent) that supports file uploading with formData. Then, in the backend, you need to use multer (https://github.com/expressjs/multer), to get the file.

In the frontend file

//Method to do the request
superagent
.post(/register")
.attach("avatar", uploadedImage)

uploadedImage has the image content that you get in the VueJS component

In the backend file

var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
import fs from 'fs-extra'

router.post('/register', upload.single('avatar'), (req, res, next) => {
    return fs.readFile(req.file.path)
            .then(content => {
                // The content of the file
            })
}

With this code, everytime you upload a file to /register with the file content in the formdata, your image will be stored in /uploads folder on your backend. Please note that the image key must be the same in the frontend and backend, in this case, avatar.

This worked well. However I don't really understand how I would use this file once its in the uploads folder. For example, I want to send the file to a function. How would I do that? — M. H, Nov 03 '18 at 08:26
Your function will receive the file path as argument, then you can use fs module to read the content of the file and use it as you want. // Your function function loadFile(filename) { fs.readFile(filename) .then(content => { // The content of the file is here, use it as you want }) } loadfile(req.file.path); This piece of code helped you? What do you want to do with the file? I don't understand. — Pedro Silva, Nov 04 '18 at 12:37

Accessing data sent as FormData using Axios

1 Answers1

Linked