如何在 Vue 表單中處理圖片
我在 Vue 中有一個(gè) form 表單，用于上傳博客帖子，它有標(biāo)題、正文、描述、片段和圖片等范圍。所有的一切都是必需的。我在 Express 中設(shè)置了一個(gè) API 來(lái)處理這個(gè)問(wèn)題。我在 Postman 中測(cè)試正常，但是我不知道如何通過(guò)瀏覽器將文件發(fā)送給數(shù)據(jù)庫(kù)。我一直收到 500 錯(cuò)誤，并且我將數(shù)據(jù)打印到控制臺(tái)，而圖片字段為空，所以我確信這就是問(wèn)題所在，但我就是搞不清楚怎么辦。
這是我前端頁(yè)面的 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 請(qǐng)求。
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 }); }});解決方法
讓我們監(jiān)視文件 <input> 中的 change 事件。這樣可以確保每次用戶(hù)的上傳行為觸發(fā) updatePhoto 方法并把文件數(shù)據(jù)儲(chǔ)存到 this.photo。
<input type='file' accept='image/*' @change='updatePhoto($event.target.name, $event.target.files)'>
編碼去收集所有的數(shù)據(jù)并發(fā)送請(qǐng)求
// vue組件的其他部分data () { return { title: ’’, body: ’’, description: ’’, snippet: ’’, photo: {} // 儲(chǔ)存文件數(shù)據(jù) };},methods: { updatePhoto (files) { if (!files.length) return; // 存儲(chǔ)文件數(shù)據(jù) 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組件的其他部分
很明顯，我跳過(guò)了很多事情，比如整個(gè) vue 組件結(jié)構(gòu)，我相信它與這個(gè)問(wèn)題無(wú)關(guān)，還有一些確保在啟動(dòng)請(qǐng)求之前文件數(shù)據(jù)可用的檢查等等。這是一個(gè)關(guān)于如何獲取文件數(shù)據(jù)的想法，所以希望這個(gè)答案能啟發(fā)您。
以上就是如何在 Vue 表單中處理圖片的詳細(xì)內(nèi)容，更多關(guān)于Vue 表單中處理圖片的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. nodejs報(bào)digital envelope routines::unsupported錯(cuò)誤的最新解決方法2. 匹配模式 - XSL教程 - 43. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)4. 詳解JS前端使用迭代器和生成器原理及示例5. WML語(yǔ)法大全與相關(guān)介紹第1/3頁(yè)6. 詳解CSS偽元素的妙用單標(biāo)簽之美7. 使用css實(shí)現(xiàn)全兼容tooltip提示框8. asp中response.write("中文")或者js中文亂碼問(wèn)題9. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)10. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向
網(wǎng)公網(wǎng)安備