微客导航 » 文章资讯 » vue实现图片上传预览功能

vue实现图片上传预览功能

2023-08-04 02:11:04 400

本文实例为大家分享了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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现图片上传预览功能

热门推荐

随机推荐