vue开发简单上传图片功能
本文实例为大家分享了vue实现简单上传图片功能的具体代码，供大家参考，具体内容如下
vue简单的上传个图片的功能，主要代码：
<template>
<div class="plan_list">
<div class="plan_name Upload_name">企业logo</div>
<div class='Upload'>
<input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*">
<img src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
</div>
</div>
</template>
<script>
export default {
name: "feedShopping",
data() {
return {}
},
methods: {
//上传图片
xmTanUploadImg(){
var obj=this.$refs.box;//获取元素的dom
var file = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var img = document.getElementById("avarimgs");//获取图片id
img.src = e.target.result;//给图片src路径赋值
//重要：这里可以把获取的src路径的 base64 格式的图片传给后端即可
}
reader.readAsDataURL(file)
},
}
<script>
<style scoped>
#avarimgs,#xdaTanFileImg{
width: 0.8rem;
height: 0.8rem;
border-radius: 0.1rem;
margin: 0.1rem 0;
float: right;
}
#xdaTanFileImg{
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.Upload_name{
line-height: 1rem;
}
</style>
参照之前发布的 jquery上传图片代码更改 完整代码
相关文章
Vivienne
2021-07-20
Claire
2021-05-21
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20
Peony
2023-07-20
Penelope
2023-07-20