Vuejs: Axios post JSON data and Image data

Question

Currently, I am creating a form with image data and JSON data. I am using 2 post method to post image data and JSON data separately to my nodejs backend. Is it any possible solution that enables me to post once for image and JSON data only by using axios and backend by using nodejs.

The following is my code.

Frontend vue.js

submitAuth() {
  console.log(this.promo.bannerImg)
  const formData = new FormData()
  formData.append('bannerImg', this.promo.bannerImg)
  formData.append('inAppImg', this.promo.inAppImg)
  formData.append('inAppImg', this.promo)

   axios.post(`http://localhost:5000/success`, 
       this.promo
     )
     .then(response => { 
       console.log('Submit Success')
     })
     .catch(e => {
       console.log('Submit Fail')
     })

  axios.post('http://localhost:5000/uploadImg', 
      formData
  ).then(response => {
    console.log('Submit Success')
  }).catch(e => {
    console.log('Submit Fail')
  })
},

},

Backend node.js

app.post("/success", function (request, response) {
  co(function* () {
    var promouid = request.body.uid
    var filename = __dirname + '/public/promo-json/' +  promouid + '.json'
    var promotionJSON = JSON.stringify(request.body)
    fs.writeFile(filename, promotionJSON, 'utf-8', function (err) {
      if (err) throw err;
      console.log(request.body);
    });

    var stream = fs.createReadStream(filename);
    var size = fs.statSync(filename).size;
    var result = yield client.putStream( 
     'promojson/' + promouid + '.json', stream, {contentLength: size});
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
});

app.post("/uploadImg", function (req, res) {
  var storage = multer.diskStorage({
        destination: 'public/image', 
        filename: function ( req, file, cb ) {
          // set image name
          console.log()
          cb( null,  'asdasdsad-' + Date.now());
      }
    });
    var upload = multer({
        storage: storage,
    }).any();

    upload(req, res, function(err) {
        if (err) {
            console.log(err);
            return res.end('Error');
        } else {
            console.log(req.body);
            req.files.forEach(function(item) {
                console.log(item);
            });
          res.end('File uploaded');
        }
    });
  });

how bout you convert the image to a base64encoded string on the client and push that to the server in the same post request. You just need to convert back to file on the server. Ps: base64 most likely doubles the size of the file, compression on your server can come in handy — Mueyiwa Moses Ikomi
– Mueyiwa Moses Ikomi, Commented Jan 29, 2020 at 6:38
i dun think convert to base64 image is a good practice to pass image data to backend. — Chan Yoong Hon
– Chan Yoong Hon, Commented Jan 29, 2020 at 7:51
It has its use case and for what I know, it's not terrible to practise if you are already working with strings. You don't even need to decode before saving. you can just save the string wherever. — Mueyiwa Moses Ikomi
– Mueyiwa Moses Ikomi, Commented Jan 29, 2020 at 19:05

Ivan Kahl · Accepted Answer · 2020-01-29 08:07:26Z

7

You would probably be better off using FormData for everything you need to upload if you want to use a single request to upload everything.

You could take your JSON data, serialize it to a string and then add it to the FormData along with the image.

Your frontend vue.js would look something like this:

const formData = new FormData();

// Add images to form data
formData.append('bannerImg', this.promo.bannerImg)
formData.append('inAppImg', this.promo.inAppImg)
formData.append('inAppImg', this.promo)

// Add the serialized JSON data to the formData (not
// sure what your JSON object is called)
formData.append('data', JSON.stringify(this.data));

// Submit the form data 
axios.post('http://localhost:5000/uploadImg', 
  formData
).then(response => {
  console.log('Submit Success')
}).catch(e => {
  console.log('Submit Fail')
});

In the back-end you would simply deserialize the data field in the FormData that is sent to a JSON object and you can then use it.

answered Jan 29, 2020 at 8:07

Ivan Kahl

6183 silver badges11 bronze badges

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

2 Comments

Mueyiwa Moses Ikomi Over a year ago

But hows is the image uploaded using this?

Ivan Kahl Over a year ago

You can use the same code you were using to save files submitted to the /upload endpoint (req.files.forEach(...)) in the /success endpoint. You would just retrieve the JSON from one of the FormData fields and then loop through the uploaded files and save them.

Collectives™ on Stack Overflow

Vuejs: Axios post JSON data and Image data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related