Having an issue with my Vue app connecting to the backend using express. When I attempt to include an image in the request, it doesn't reach the backend properly. Strangely though, if I bypass express and connect directly from the Vue app, everything works fine. It seems like the image is somehow getting lost along the way.
Here's the Vue code:
uploadImage(){
this.loadingImage = true
const url = "/person/"+localStorage.getItem("userUuid")+"/picture";
var config = {headers: {"Authorization": "Bearer "+localStorage.getItem("token")}};
const fd = new FormData();
fd.append('image', this.picture, this.picture.name)
this.$http.post(url, fd, config)
.then((response) => {
console.log(response)
this.loadingImage = false
//window.location.reload()
})
.catch((error) => {
console.log(error)
})
And here's my app.js setup:
const proxy = require('express-http-proxy');
const express = require('express')
const fileUpload = require('express-fileupload');
const app = express();
app.post('/person/:id/picture', proxy(config.backendURL, {
filter: function(req, res) {return checkBearer(req, res)}
}));