如何讓使用者上傳 img 並將其儲(chǔ)存在公共資料夾中?
我正在製作簡(jiǎn)單的應(yīng)用程序,使用戶(餐廳經(jīng)理)能夠插入新的食物及其圖像。
我讓使用者用表單上傳一個(gè)img,我需要將其保存在Nuxt專(zhuān)案的public資料夾中。
食物資訊透過(guò) $fecth 和 POST 方法插入,然後從 POST 中提取並插入到資料庫(kù)中
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)) },
這不是一個(gè)可行的解決方案,因?yàn)樽罱K用戶可能會(huì)出現(xiàn)惡意行為並發(fā)送垃圾郵件查詢。因此,過(guò)度填充您的伺服器並使其崩潰或填滿整個(gè)磁碟。
最重要的是,它不會(huì)被最佳化、正常服務(wù)或任何其他事情(沒(méi)有捆綁步驟)。
相反,我建議您將其上傳到某個(gè)後端,對(duì)其進(jìn)行最佳化(可以使用 Cloudinary 等服務(wù)來(lái)完成)並將其託管在 AWS S3 或類(lèi)似的裝置上(最好是在 CDN 上)。
這是一個(gè)更具可擴(kuò)展性、更安全且持久的解決方案。