vue如何显示图片,vue页面生成图片
这篇文章主要介绍了如何在某视频剪辑软件表单中处理图片，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
问题：
我在某视频剪辑软件中有一个形式表单，用于上传博客帖子，它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在表达中设置了一个应用程序接口来处理这个问题。我在邮递员中测试正常，但是我不知道如何通过浏览器将文件发送给数据库。我一直收到500 错误，并且我将数据打印到控制台，而图片字段为空，所以我确信这就是问题所在，但我就是搞不清楚怎么办。
这是我前端页面的形式表单：
模板
div class=容器
div id=nav
管理导航/
/div
div id=创建
氕创建新帖子/h1
/div
div id=post
身体
形式
=标题标题的标签:/标签
textarea v-model=formdata。标题行= 5 列= 60 名称=标题
占位符=输入文本
/textarea
br/
的标签=bodyBody: /label
textarea v-model=formdata。body rows= 5 cols= 60 name= body
占位符=输入文本
/textarea
br/
=描述描述的标签:/标签
textarea v-model=formdata。描述行= 5 列= 60 名称=描述
占位符=输入文本
/textarea
br/
=snippetSnippet的标签:/标签
textarea v-model=formdata。snippet rows= 5 cols= 60 name= snippet
占位符=输入文本
/textarea
br/
=文件上传照片的标签:/标签
投入
class=form-control-file
type=file
accept=image/*
v-bind=formdata.photo
/
br/
输入id= submit type= submit value= submit @ click。prevent= create post()/
/表单
/body
/div
/div
/模板
脚本
从导入管理导航./组件/管理导航。vue ；
从以下位置导入邮政服务./service/post service ；
导出默认值{
名称：创建历史，
组件：{
管理导航，
},
data() {
返回{
表单数据：{
标题： ,
正文： ,
描述： ,
片段："",
图：空，
},
};
},
方法：{
createPost() {
控制台。日志(这个。formdata)；
/* eslint prefere-destruction:0 */
const formdata=this.formdata
邮政服务。创建帖子(表单数据)。然后(()={
console.log("成功");
});
},
},
};
/脚本
这是邮政请求。
router.post(/add-story ，upload.single(photo )，async(req，res)={
尝试{
let Post=new Post()；
贴吧。标题=请求。身体。标题；
贴吧。描述=请求。身体。描述；
贴吧。照片=请求。文件。位置；
贴吧。body=req身体。身体；
贴吧。snippet=req。身体。片段；
等待发布。save()；
res.json({
状态：真，
消息："已成功保存。"
});
} catch(err) {
决议现状(500).json({
成功：假，
消息：错误消息
});
}
});
解决方法
让我们监视文件投入中的变化事件。这样可以确保每次用户的上传行为触发更新照片方法并把文件数据储存到这张照片。
输入类型= file accept= image/* class= form-control-file
@ change=更新照片(event。目标。 name，$event.target.files)
编码去收集所有的数据并发送请求
//vue组件的其他部分
data () {
返回{
标题： ,
正文： ,
描述： ,
片段："",
照片：{} //储存文件数据
};
},
方法：{
更新照片（文件){
如果(!文件.长度)返回；
//存储文件数据
this.photo={
名称：文件[0]。姓名，
数据：文件[0]
};
},
createPost() {
let formData=new formData()；
formData.append(title ，this。标题)；
formData.append(body ，this。体)；
formData.append(description ，this。描述)；
formData.append(snippet ，this。片段)；
formData.append(photo ，this.photo.data，this。照片。姓名)；
post service . create post(formdata)。然后(()={
console.log(“成功”)；
});
}
}
Vue组件的其他部分
显然，我跳过了很多东西，比如整个vue组件结构，我相信这与这个问题无关，以及在开始请求之前确保文件数据可用的一些检查等等。这是一个关于如何获取文件数据的思路，希望这个回答能给你启发。
这就是Vue形式的图片如何处理的细节。更多关于Vue形式处理图片的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。