vue项目实现图片上传功能
更新时间：2019年12月23日 15:21:16 作者：倚楼听风雨的行者
这篇文章主要为大家详细介绍了vue项目实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现图片上传功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.uploadimg{
width:100px;
height:100px;
border-radius: 50%;
}
</style>
<body>
<div id="app">
<input type="file" @change="upTx" id="txUrl">
<img class="uploadimg" :src="imgsrc"/>
</div>
</div>
</body>
<!--<script src="util.js">-->
<!--</script>-->
<script src="../vue.js">
</script>
<script src="../jquery-1.11.1.js"></script>
<script src="../axios.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
imgsrc:"000",
return:{
}
},
mounted(){
},
methods:{
upTx() {
var _this = this;
var r = new FileReader();
var file = document.getElementById("txUrl").files[0];
var beat64Url;
if (!/image\/\w+/.test(file.type)) {
// this.$message.error("上传的文件必须为图片！！");
alert('上传的文件必须为图片');
return false;
}
r.readAsDataURL(file);
r.onload = function(e) {
beat64Url = this.result;
};
var formData = new FormData();
formData.append("upload_img", $("#txUrl")[0].files[0]);
axios({
url: "https://mk_api.dthudong.cn/api/file/upImg",
method: "POST",
headers: {
token: '55a31e89d7dd8b80282cba7d844d1c28'
},
data: formData
})
.then(res => {
console.log(res.data);
if (res.data.code == 0) {
vm.imgsrc =res.data.data.src;
console.log(vm.imgsrc)
} else {
_this.$message({
message: res.data.msg,
type: "alert"
});
}
})
.catch(function(error) {
});
},
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在Vue.js中,组件间的通信是构建复杂应用的关键,但当涉及到非父子关系的组件通信时,传统的做法就显得力不从心了,本文将深入探讨几种有效的非父子组件通信方法,并通过具体的代码示例来帮助读者理解和应用这些技术,需要的朋友可以参考下2024-09-09
vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文介绍了vue中el-select 和el-tree二次封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
如何解决sass-loader和node-sass版本冲突的问题
这篇文章主要介绍了如何解决sass-loader和node-sass版本冲突的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现自定义组件挂载原型上方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
如果你也遇到在 vue 应用中，首页加载资源过多，导致加载缓慢的问题，下面的方法也许能帮到你，主要的处理思想是：让首页多余的资源能在需要它的时候再加载2022-09-09
这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了vue实现放大缩小拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件,下面这篇文章主要给大家介绍了关于vue3封装Notification组件的完整步骤,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
最新评论