上传图像并将其保存在 NuxtJs 的公共文件夹中

Question

如何让用户上传 img 并将其存储在公共文件夹中？

我正在制作简单的应用程序，使用户（餐厅经理）能够插入新的食物及其图像。

我让用户用表单上传一个img，我需要将其保存在Nuxt项目的public文件夹中。

食物信息通过 $fecth 和 POST 方法插入，然后从 POST 中提取并插入到数据库中

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 上）。

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