如何在 Vue 表单中处理图片
我在 Vue 中有一个 form 表单，用于上传博客帖子，它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 Express 中设置了一个 API 来处理这个问题。我在 Postman 中测试正常，但是我不知道如何通过浏览器将文件发送给数据库。我一直收到 500 错误，并且我将数据打印到控制台，而图片字段为空，所以我确信这就是问题所在，但我就是搞不清楚怎么办。
这是我前端页面的 form 表单:
<template> <div class='container'> <div id='nav'> <adminnav/> </div> <div id='create'> <h1>Create new post</h1> </div> <div id='post'> <body> <form> <label for='title'>Title: </label> <textarea v-model=formdata.title rows='5' cols='60' name='title' placeholder='Enter text'> </textarea> <br/> <label for='body'>Body: </label> <textarea v-model=formdata.body rows='5' cols='60' name='body' placeholder='Enter text'> </textarea> <br/> <label for='description'>Description: </label> <textarea v-model=formdata.description rows='5' cols='60' name='description' placeholder='Enter text'> </textarea> <br/> <label for='snippet'>Snippet: </label> <textarea v-model=formdata.snippet rows='5' cols='60' name='snippet' placeholder='Enter text'> </textarea> <br/> <label for='file'>Upload photo: </label> <input type='file' accept='image/*' v-bind='formdata.photo' /> <br/> <input type='submit' value='submit' @click.prevent='createPost()'/> </form> </body> </div> </div></template><script>import adminnav from ’../components/adminnav.vue’;import PostService from ’../service/PostService’;export default { name: ’createStory’, components: { adminnav, }, data() { return { formdata: { title: ’’, body: ’’, description: ’’, snippet: ’’, photo: null, }, }; }, methods: { createPost() { console.log(this.formdata); /* eslint prefer-destructuring: 0 */ const formdata = this.formdata; PostService.createPost(formdata) .then(() => { console.log(’success’); }); }, },};</script>
这是 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 }); }});解决方法
让我们监视文件 <input> 中的 change 事件。这样可以确保每次用户的上传行为触发 updatePhoto 方法并把文件数据储存到 this.photo。
<input type='file' accept='image/*' @change='updatePhoto($event.target.name, $event.target.files)'>
编码去收集所有的数据并发送请求
// 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() { let formData = new FormData(); 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 表单中处理图片的资料请关注好吧啦网其它相关文章！
相关文章：
网公网安备