如何让用户上传 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))
}, Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这不是一个可行的解决方案,因为最终用户可能会出现恶意行为并发送垃圾邮件查询。因此,过度填充您的服务器并使其崩溃或填满整个磁盘。
最重要的是,它不会被优化、正常服务或任何其他事情(没有捆绑步骤)。
相反,我建议您将其上传到某个后端,对其进行优化(可以使用 Cloudinary 等服务来完成)并将其托管在 AWS S3 或类似的设备上(最好是在 CDN 上)。
这是一个更具可扩展性、更安全且持久的解决方案。