app头像上传vue_vue里面实现这种头像上传的功能，求demo或者比较好的方法

你可以使用element-ui中的上传方法

这是原生的方法

img{max-width: 100%; height: 100px;margin: 10px 20px;}

.img_list .img-div{width: 100px;height: 200px; float: left;  overflow: hidden;text-align: center;  }

.upload{position: relative;}

.upload input{opacity: 0;position: absolute;top: 0;left: 10px;height: 100px;width: 100px;}

.upload .upload_box{width: 100px;height: 100px;background-color: pink;color: white;}

.img-div p{color: #28a4b0;margin: 0;}

点我上传图片哦

var file_input=document.getElementsByClassName("file_input")[0];

// 触发事件用的是change，因为files是数组，需要添加下标

file_input.addEventListener("change",function(){

var obj=this;

var obj_name=this.files[0].name;

var img_length=obj.files.length;

for(var i=0;i

{

if(!(/image\/\w+/).test(obj.files[i].type))

{

alert("上传的图片格式错误，请上传图片");

return false;

}

var reader = new FileReader();

reader.error=function(e){

alert("读取异常")

}

reader.onload = function(e){

// div_html是包括图片和图片名称的容器

var img_html='';

var div_html=document.createElement("div");

var p_html=document.createElement("p");

if(document.getElementsByClassName("img_list")[0].children.length<5)

{

div_html.innerHTML=img_html;

div_html.appendChild(p_html);

p_html.innerHTML=obj_name;

div_html.className="img-div";

document.getElementsByClassName("img_list")[0].appendChild(div_html);

}else{

alert("最多上传5张图片")

}

};

reader.οnlοadstart=function(){

console.log("开始读取"+obj_name);

}

reader.οnprοgress=function(e){

if(e.lengthComputable){

console.log("正在读取文件")

}

};

reader.readAsDataURL(obj.files[i]);

}

})