Laden Sie das Bild hoch und speichern Sie es im öffentlichen Ordner in NuxtJs

Question

Wie können Benutzer Bilder hochladen und im öffentlichen Ordner speichern?

Ich erstelle eine einfache App, die es dem Benutzer (Restaurantmanager) ermöglicht, neue Lebensmittel und deren Bilder einzufügen.

Ich lasse den Benutzer ein Bild mit einem Formular hochladen und muss es im öffentlichen Ordner des Nuxt-Projekts speichern.

Lebensmittelinformationen werden über die Methoden $fecth und POST eingefügt, dann aus POST extrahiert und in die Datenbank eingefügt

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

这不是一个可行的解决方案，因为最终用户可能会出现恶意行为并发送垃圾邮件查询。因此，过度填充您的服务器并使其崩溃或填满整个磁盘。

最重要的是，它不会被优化、正常服务或任何其他事情（没有捆绑步骤）。
相反，我建议您将其上传到某个后端，对其进行优化（可以使用 Cloudinary 等服务来完成）并将其托管在 AWS S3 或类似的设备上（最好是在 CDN 上）。

这是一个更具可扩展性、更安全且持久的解决方案。