如何讓使用者上傳 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)) },
這不是一個可行的解決方案,因為最終用戶可能會出現惡意行為並發送垃圾郵件查詢。因此,過度填充您的伺服器並使其崩潰或填滿整個磁碟。
最重要的是,它不會被最佳化、正常服務或任何其他事情(沒有捆綁步驟)。
相反,我建議您將其上傳到某個後端,對其進行最佳化(可以使用 Cloudinary 等服務來完成)並將其託管在 AWS S3 或類似的裝置上(最好是在 CDN 上)。
這是一個更具可擴展性、更安全且持久的解決方案。