这篇文章主要介绍了如何在 Vue 表单中处理图片，帮助大家更好的理解和使用vue框架。问题：我在 Vue 中有一个表单，用于上传博客帖子，包括标题、正文、描述、片段和图片等内容。所有这些都是必须的。我在 Express 中设置了一个 API 来处理这个问题。我在 PostMan 中测试正常，但是我不知道如何通过浏览器将文件发送给数据库。我一直收到 500 错误，并且我将数据打印到控制台，而图片字段为空，所以我确信这就是问题所在，但我就是搞不清楚怎么办。
这是我前端页面的表单:
tITle: body: descRIPtion: snIPpet: Upload photo:
这是 POST 请求。
RouteR.post(“/add-sTory”, upload.single(photo), async(Req, Res) => { try{ let post = new Post(); post.tITle = Req.body.tITle; post.descRIPtion = Req.body.descRIPtion; post.photo = Req.file.location; post.body = Req.body.body; post.snIPpet = Req.body.snIPpet;
awaIt post.save();
Res.json({ statUS: tRue, MeSSage: “SUCceSSfully saved.” }); } catch(eRR) { Res.statUS(500).json({ sUCceSS: FAlse, MeSSage: eRR.MeSSage }); } });
解决方法
让我们监视文件中的 change 事件。这样可以确保每次用户的上传行为触发 updatePhoto 方法并把文件数据储存到 tHis.photo。
编码去收集所有的数据并发送请求
很明显，我跳过了很多事情，比如整个 vue 组件结构，我相信它与这个问题无关，还有一些确保在启动请求之前文件数据可用的检查等等。这是一个关于如何获取文件数据的想法，所以希望这个答案能启发您。
以上就是如何在 Vue 表单中处理图片的详细内容。来源：脚本之家。
