域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)
這篇文章主要介紹了如何在 Vue 表單中處理圖片，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
問(wèn)題：
我在 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
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 請(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/*" class="form-control-file"
@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)注腳本之家其它相關(guān)文章！
來(lái)源：腳本之家
鏈接：https://www.jb51.net/article/204814.htm
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
