欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何在 Vue 表单中处理图片

程序员文章站 2022-04-29 23:01:27
问题:我在 vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 express 中设置了一个 api 来处理这个问题。我在 post...

问题:

我在 vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 express 中设置了一个 api 来处理这个问题。我在 postman 中测试正常,但是我不知道如何通过浏览器将文件发送给数据库。我一直收到 500 错误,并且我将数据打印到控制台,而图片字段为空,所以我确信这就是问题所在,但我就是搞不清楚怎么办。

这是我前端页面的 form 表单:

这是 post 请求。

解决方法

让我们监视文件 <input> 中的 change 事件。这样可以确保每次用户的上传行为触发 updatephoto 方法并把文件数据储存到 this.photo

编码去收集所有的数据并发送请求

很明显,我跳过了很多事情,比如整个 vue 组件结构,我相信它与这个问题无关,还有一些确保在启动请求之前文件数据可用的检查等等。这是一个关于如何获取文件数据的想法,所以希望这个答案能启发您。

以上就是如何在 vue 表单中处理图片的详细内容,更多关于vue 表单中处理图片的资料请关注其它相关文章!