问题：
我在 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: '' ,
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 表单中处理图片的资料请关注服务器之家其它相关文章！
原文链接：https://learnku.com/vuejs/t/53875