如何在 Vue 表单中处理图片

2023-07-06 07:25:03 204

问题：

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

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

这是POST请求。

router.post("/add-story",upload.single('photo'),async(req,res)=>{ try{ letpost=newPost(); 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; awaitpost.save(); res.json({ status:true, message:"Successfullysaved." }); }catch(err){ res.status(500).json({ success:false, message:err.message }); } });

解决方法

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

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

//vue组件的其他部分 data(){ return{ title:'', body:'', description:'', snippet:'', photo:{}//储存文件数据 }; }, methods:{ updatePhoto(files){ if(!files.length)return; //存储文件数据 this.photo={ name:files[0].name, data:files[0] }; }, createPost(){ letformData=newFormData(); formData.append('title',this.title); formData.append('body',this.body); formData.append('description',this.description); formData.append('snippet',this.snippet); formData.append('photo',this.photo.data,this.photo.name); PostService.createPost(formdata) .then(()=>{ console.log('success'); }); } } //vue组件的其他部分

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

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

如何在 Vue 表单中处理图片

问题：

Createnewpost

解决方法

随机推荐

如何在 Vue 表单中处理图片

问题：

Createnewpost

解决方法

热门推荐

随机推荐