如何在 Vue 表单中处理图片
更新时间：2021年01月26日 11:44:06 作者：runstone
这篇文章主要介绍了如何在 Vue 表单中处理图片，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
问题：
我在 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 表单中处理图片的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了基于vue实现图片验证码倒计时60s功能,本文通过截图实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue代理和跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要给大家介绍了关于如何使用Vue进行文件预览与打印功能的相关资料,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue vue-esign签字板的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
回到顶部在很多网页中都可以见到，本文主要介绍了Vue3 封装回到顶部组件的实现示例，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue中在data里面调用method方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue自定义keepalive组件的相关资料,keep-alive组件是使用 include exclude这两个属性传入组件名称来确认哪些可以被缓存的，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-07-07
这篇文章主要介绍了vue项目中的类使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论