我在Vue中有一个用于上传博客文章的表单，它有标题、正文、描述、摘要和照片区域。这些都是必需的。我在Express中设置了一个API来处理这个问题，我在Postman中测试了它，它有效，但我不知道如何从浏览器将文件发送到数据库。我一直得到一个500错误，我把数据打印到控制台，照片字段是空的，所以我确定这就是问题，但我就是不能弄清楚。
这是我的表单在前端:
<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)"
>
收集所有数据并发送请求的代码
// Other parts of your vue component
data () {
return {
title: '',
body: '',
description: '',
snippet: '',
photo: {} // To store file data
};
},
methods: {
updatePhoto (files) {
if (!files.length) return;
// Store the file data
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');
});
}
}
// Other parts of your vue component
显然，我跳过了很多东西，比如整个vue组件结构，我认为它与这个问题无关，以及一些必要的检查，以确保在启动请求之前有一个文件数据可用等等。这是一个关于如何获取文件数据的想法，希望这个答案能对你有所启发。