Téléchargez l'image et enregistrez-la dans le dossier public dans NuxtJs

Question

Comment permettre aux utilisateurs de télécharger une image et de la stocker dans un dossier public ?

Je crée une application simple pour permettre à l'utilisateur (responsable du restaurant) d'insérer de nouveaux plats et ses images.

Je laisse l'utilisateur télécharger une image avec un formulaire et je dois l'enregistrer dans le dossier public du projet Nuxt.

Les informations alimentaires sont insérées via les méthodes $fecth et POST, puis extraites du POST et insérées dans la base de données

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

FORM:
<input class="form-control" type="file" v-on:change="uploadImg()" id="formFile">
<label for="formFile" class="form-label">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))

    },

Answer 1

Ce n'est pas une solution viable car les utilisateurs finaux peuvent se comporter de manière malveillante et envoyer des requêtes de spam. Alors, surchargez votre serveur et faites-le planter ou remplissez tout le disque.

Le plus important c'est qu'il ne sera pas optimisé, servi normalement ou autre chose (pas d'étape de regroupement).
Au lieu de cela, je vous recommande de le télécharger sur un backend, de l'optimiser (cela peut être fait en utilisant un service comme Cloudinary) et de l'héberger sur AWS S3 ou similaire (de préférence sur un CDN).

Il s’agit d’une solution plus évolutive, sécurisée et durable.