[Vuejs]-Sending a HTTP POST REQUEST with image and text

by

0👍

✅

Reason for behavior you see is you are sending two different requests to the same route. 1st includes ALBUM and DESCRIPTION form field values, but not the files. Second (inside setTimeout) will contain just files and no other fields, so referencing them like req.body.ALBUM will return undefined

You can send all data (text fields and files) in one request. Just do this:

const formData = new FormData();
for (let file of Array.from(this.myAlbumImages)) {
  formData.append("files", file);
}
formData.append("ALBUM", this.albumName);
formData.append("DESCRIPTION", this.albumDesc);
axios.post("http://localhost:9001/image/album", formData)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

FormData always uses content type multipart/form-data. To parse it on server side you need Express middleware that parses multipart forms, and gives you access to both fields and image/s. For example multer…

0👍

for the first part the client may can help you this link How to post image with fetch?

const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

    const options = {
      method: 'POST',
      body: formData,
      // If you add this, upload won't work
      // headers: {
      //   'Content-Type': 'multipart/form-data',
      // }
    };

    fetch('your-upload-url', options);

and for the seerver part cant help you this link
Node Express sending image files as API response

app.get('/report/:chart_id/:user_id', function (req, res) {
    res.sendFile(filepath);
});

and oficial documentation about this
http://expressjs.com/en/api.html#res.sendFile

Leave a comment