猿问

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

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


斯蒂芬大帝
浏览 2404回答 1
1回答

Helenr

你可以使用element-ui中的上传方法这是原生的方法<!DOCTYPE html>&nbsp;<html>&nbsp;<head><meta charset="UTF-8">&nbsp;&nbsp;<title></title>&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp; &nbsp; img{max-width: 100%; height: 100px;margin: 10px 20px;}&nbsp;&nbsp;&nbsp; &nbsp; .img_list .img-div{width: 100px;height: 200px; float: left;&nbsp; overflow: hidden;text-align: center;&nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; .upload{position: relative;}&nbsp;&nbsp;&nbsp; &nbsp; .upload input{opacity: 0;position: absolute;top: 0;left: 10px;height: 100px;width: 100px;}&nbsp;&nbsp;&nbsp; &nbsp; .upload .upload_box{width: 100px;height: 100px;background-color: pink;color: white;}&nbsp;&nbsp;&nbsp; &nbsp; .img-div p{color: #28a4b0;margin: 0;}&nbsp;&nbsp;</style>&nbsp;&nbsp;</head>&nbsp;<body>&nbsp;<div class="upload"><input class="file_input" type="file" multiple id="avc"/>&nbsp;&nbsp;<div class="upload_box">&nbsp;&nbsp;&nbsp; &nbsp; 点我上传图片哦&nbsp;&nbsp;</div>&nbsp;&nbsp;</div><div class="img_list"></div>&nbsp;<script>var file_input=document.getElementsByClassName("file_input")[0];// 触发事件用的是change，因为files是数组，需要添加下标file_input.addEventListener("change",function(){&nbsp;&nbsp;&nbsp; &nbsp; var obj=this;&nbsp;&nbsp;&nbsp; &nbsp; var obj_name=this.files[0].name;&nbsp;&nbsp;&nbsp; &nbsp; var img_length=obj.files.length;&nbsp;&nbsp;&nbsp; &nbsp; for(var i=0;i<img_length;i++)&nbsp;&nbsp;&nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(!(/image\/\w+/).test(obj.files[i].type))&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("上传的图片格式错误，请上传图片");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.error=function(e){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("读取异常")&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function(e){&nbsp;&nbsp;// div_html是包括图片和图片名称的容器&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img_html='<img src="'+e.target.result+'"/>';&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var div_html=document.createElement("div");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var p_html=document.createElement("p");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(document.getElementsByClassName("img_list")[0].children.length<5)&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div_html.innerHTML=img_html;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div_html.appendChild(p_html);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p_html.innerHTML=obj_name;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div_html.className="img-div";&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("img_list")[0].appendChild(div_html);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("最多上传5张图片")&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.onloadstart=function(){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("开始读取"+obj_name);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.onprogress=function(e){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(e.lengthComputable){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("正在读取文件")&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(obj.files[i]);&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp;&nbsp;})&nbsp;&nbsp;</script>&nbsp;</body>&nbsp;</html>
1
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答