Upload an image and save it in public folder, in NuxtJs-CodePudding

How do i let the user upload an img and store it in the public folder?

Im making simple app that gives the user(Restaurant Manager) the ability to insert a new Food and its image.

I let the user upload an img with a form, and i need to save it in the public folder of the Nuxt project.

The food infos are inserted with $fecth and a POST method, then are extracted from the POST and inserted in the DB with

INSERT INTO menu (food_name, price, course ) 
        VALUES (?, ?, ?)`,
[plateName, platePrice, course]

FORM:
<input  type="file" v-on:change="uploadImg()" id="formFile">
<label for="formFile" >Add Image</label>

methods {
    uploadImg(){

        ???

    },
    addFood() {
      $fetch("/api/insert/", {
        method: "POST",
        body: {
            plateName: this.plateName,
            platePrice: this.platePrice,
            course: this.plateSelect,
            }
      })
      .then(() => window.location.href = "/inserimento")
      .catch((e) => alert(e))

    },

CodePudding user response：

This is not something that would be a viable solution because the end user could have a malicious behavior and spam the queries. Hence, over-populating your server and making it crash or fill the whole disk.

On top of that, it will not be optimized, served properly or anything (no bundle step on those).
Rather, I recommend that you upload it to some backend, optimize it (can be done with a service like Cloudinary) and host it on AWS S3 Or similar (preferably on a CDN).

That is a far more scalable, safer and durable solution.