上傳圖像並將其保存在 NuxtJs 的公共資料夾中
P粉141911244
P粉141911244 2024-03-29 17:28:07
0
1
506

如何讓使用者上傳 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))

    },

P粉141911244
P粉141911244

全部回覆(1)
P粉765570115

這不是一個可行的解決方案,因為最終用戶可能會出現惡意行為並發送垃圾郵件查詢。因此,過度填充您的伺服器並使其崩潰或填滿整個磁碟。

最重要的是,它不會被最佳化、正常服務或任何其他事情(沒有捆綁步驟)。
相反,我建議您將其上傳到某個後端,對其進行最佳化(可以使用 Cloudinary 等服務來完成)並將其託管在 AWS S3 或類似的裝置上(最好是在 CDN 上)。

這是一個更具可擴展性、更安全且持久的解決方案。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板