- vue上传图片,并显示在页面中的插件
-
聚码交流
-
0
2

- yhuxAvNbtxUM
0000-00-00 00:00:00
- 回帖
html代码<pclass="bg_white"><pclass="content_mission"><span>我的任务<spanstyle="padding:0;">(1)</span></span><span></span><spanid="myMission"class="mui-iconmui-icon-arrowright"@click="myMission"></span></p><pclass="mission_list"><ul><li><spanclass="mission_img"><spanclass="mui-iconmui-icon-plusemptyfile"><pclass="vue-upload-img-multiple"><pv-if="images.length>0"><ul><liv-for="imageinimages"><imgclass="img"style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:9;":src="image"/><ahref="javascript:void(0);"style="position:absolute;top:-30px;right:0;z-index:10;color:red;"><spanclass="mui-iconmui-icon-close"@click='delImage($index)'></span></a></li></ul></p><p><pv-if="!image"><inputtype="file"@change="onFileChange"></p><pv-else><img:src="image"/><button@click="removeImage">Removeimage</button></p></p></p></span></span><spanclass="mission_particulars"><pclass="mission_details"><spanclass="mission_name">【四带】老带新</span><spanclass="mission_score"><span>2</span>分</span></p><pclass="mission_progress"><span>进行中</span></p><pclass="mission_time_evaluation"><spanclass="mission_time">2017年6月</span><spanclass="mission_evaluation">评价:<span>3</span>人</span></p></span></li><li><spanclass="mission_img"><spanclass="mui-iconmui-icon-plusemptyfile"><pclass="vue-upload-img-multiple"><pv-if="img.length>0"><ul><liv-for="imageinimg"><imgstyle="width:100%;height:100%;position:absolute;top:0;left:0;z-index:9;":src="image"/><ahref="javascript:void(0);"style="position:absolute;top:-30px;right:0;z-index:10;color:red;"><spanclass="mui-iconmui-icon-close"@click='delImage($index)'></span></a></li></ul></p><p><pv-if="!image"><inputtype="file"@change="onFileChange"></p><pv-else><img:src="image"/><button@click="removeImage">Removeimage</button></p></p></p></span></span><spanclass="mission_particulars"><pclass="mission_details"><spanclass="mission_name">【四带】老带新</span><spanclass="mission_score"><span>2</span>分</span></p><pclass="mission_progress"><span>进行中</span></p><pclass="mission_time_evaluation"><spanclass="mission_time">2017年6月</span><spanclass="mission_evaluation">评价:<span>3</span>人</span></p></span></li></ul></p></p>js代码module.exports={name:'Upload',data:function(){return{images:[],img:[]}},onFileChange:function(e){vardom=e.currentTarget;varfiles=e.target.files||e.dataTransfer.files;if(!files.length)return;this.createImage(files);},createImage(file){varvm=this;varreader=null;varleng=file.length;for(vari=0;i<leng;i++){reader=newwindow.FileReader();reader.readAsDataURL(file[i]);reader.onload=function(e){vm.images.push(e.target.result);}}},removeImage:function(e){this.images=[];},delImage:function(index){this.images.shift(index);}}};这个js代码,只能实现第一个图片区域有图,第二个上传图片区没有图