How should I structure the backend response to a Vue.js upload?

Question

(Context: Building a company site with an admin portal that allows the user to make new team members, jobs, etc. and have the web app reflect those changes.)

I have a Vue.js web app that is hosted on a server (let's say GoDaddy or BlueHost), and I want to be able to upload pdf's and images to that same server, then reference those files elsewhere in the web app. I am comfortable in the frontend, and have figured out how to make an upload component that allows for a selection of a file, then an axios post.

Here is where my confusion begins...

First of all, I imagine it must be possible to upload files to my server and store them there.

Next, I think that I should be able to put some code (either PHP or Express or something) somewhere on the server to accept those storage requests.

Finally, I think that code would probably need to be in the root of the web app so that the web app can easily reference it.

(Side note: I have already tried Google Cloud Functions, and while they let me store images in Firebase, I couldn't figure out how to reference those photos in the web app. I have also tried to use Express to set up an api endpoint, but I am getting stalls on every post request via Postman, and I am not sure how to troubleshoot it.)

Can someone just outline what is supposed to happen, from the axios post on, and give me a basic idea of what the structure of this should look like?

I am open to learning whatever I need to make this happen.

Answer 1

send file to server with 'Content-Type': 'multipart/form-data' header in post method using axios as described here

use multer npm for handle uploading file to server .

example link here