vue实现图片上传预览功能
本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下
效果图
html结构
点击上传
本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下
效果图
html结构
点击上传
css样式
.gallery-window-map{ display:-webkit-box; display:-ms-flexbox; display:flex; margin-top:10px; } .house-pic-item{ position:relative; display:inline-block; margin-right:13px; width:120px; height:90px; background-color:#e3e3e3; } .pic-box{ width:100%; text-align:center; } .icon-zengjia{ position:relative; top:12px; font-size:26px; color:#b2b2b2; } .btn-tit{ height:38px; line-height:38px; font-size:12px; color:#999; } .mask{ display:none; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(34,34,34,0.6); } .font-btn{ display:inline-block; height:40px; width:50%; padding:020px; -webkit-box-sizing:border-box; box-sizing:border-box; } .font-btn:last-child{ position:relative; } .icon-fangda, .icon-shanchu{ font-size:22px; color:#fff; } .line{ content:''; display:inline-block; position:absolute; left:0; top:10px; width:1px; height:20px; background:#fff; }
/** *模拟点击上传图片按钮 *@index当前操作的户型box的索引 */ houseUpload(index){ this.$refs.houseTypeLoad[index].click() }, /** *上传图片到服务器 *@index当前操作的户型box的索引 */ upLoadHouse(e,index){ let_that=this constfile=e.target.files[0] if(!file){ return } newImageCompressor(file,{ quality:0.9, maxWidth:2000, maxHeight:2000, success(result){ //debugger constformData=newFormData() formData.append('file',result,result.name) formData.append('watermark',false) //SendthecompressedimagefiletoserverwithXMLHttpRequest. if(result.size>1*1024*1024||result.size<3*1024){ _that.$message('图片大小要在3K~1M之间') return }else{ _that.$ajax.post('/img/upload',formData).then(res=>{ res=res.data if(res.images&&res.images.length>0){ if(res.images[0].src!=='filesizeistoosmall'){ letitem=res.images[0].src console.log(item) _that.houseTypeForm[index].imgUrl.unshift(item) } } }) } }, error(e){ console.log(e.message) } }) }, /** *打开图片查看器 */ clickWatchImg(str,picIndex){ console.log('=================') console.log(picIndex) console.log(this.$refs[str][picIndex]) this.$refs[str][picIndex].click() }, /** *删除指定图片,操作表单数据 *@index当前操作的户型box的索引 *@picIndex当前操作的图片索引 */ delHouseImage(index,picIndex){ this.houseTypeForm[index].imgUrl.splice(picIndex,1) },
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。