如何在 Vue 表單中處理圖片
阿新 • • 發佈:2021-01-28
問題:
我在 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 class="form-control-file" type="file" accept="image/*" v-bind="formdata.photo" /> <br/> <input id="submit" 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/*" class="form-control-file" @change="updatePhoto($event.target.name,$event.target.files)" >
編碼去收集所有的資料併發送請求
// vue元件的其他部分 data () { return { title: '',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 表單中處理圖片的資料請關注我們其它相關文章!