vue图片上传组件使用详解

2023-08-04 02:35:03 169

vue图片上传组件，供大家参考，具体内容如下

最近在做项目的时候顺便补充了一下公司项目的公共组件库，刚刚手头事情告一段落，就来做个笔记。

首先来看看最终效果

1.不允许删除

2.允许用户删除（显示删除按钮）

实现的效果就是上图显示内容

接下来说说组件布局那部分直接上代码了

上面代码中的kk-icon是自定义的图标组件，只是多了个接受颜色和大小的功能，你们自己写一个替换就行了。然后动态定义它的class，实现显隐就结束了。

随手贴个样式


.uploadImg{
text-align:left;
.upload-content{
margin-left:0.3rem;
.upload-title{
display:flex;
justify-content:space-between;
padding:0.3rem0.3rem0.3rem0;
.show-num{
color:#c9c9c9;
}
}
.img-list{
display:inline-block;
margin:0.6rem0.3rem0.3rem0;
.show-img{
position:relative;
display:inline-block;
margin-right:0.12rem;
height:1.3rem;
width:1.3rem;
img{
width:100%;
height:100%;
}
.hide-del{
display:none;
}
.yd-icon-error{
position:absolute;
top:0;
right:0;
}
}
.uploadSec{
position:relative;
display:inline-block;
width:1.3rem;
height:1.3rem;
overflow:hidden;
img{
width:100%;
height:100%;
}
#choose{
position:absolute;
height:100%;
left:0;
top:0;
opacity:0;
}
}
}
}
}

接下来看看实现逻辑

借助inputtype="file"实现图片选择，是否允许多选图片的话是通过给input的multiple属性。（其他直接备注在里面了）
在组件中接收父组件传来的图片数量限制，是否开启删除操作，上传图片地址，预览地址等

props:['imgNum','title','upUrl','showUrl','showDel'],

title上传组件的标题
imgNum上传图片数量限制
upUrl设置上传图片地址
showUrl设置图片回显地址
showDel是否允许删除图片
changeNum图片改变时，触发父组件中的方法

当选择图片确定后就会触发change，因此我在@change="onUpload"进行上传，上传使用了formData

//上传操作
onUpload(e){
letphotoFile=e.target
letval=e.target.value
//判断是否符合上传条件
if(photoFile.files.length===0)returnfalse
for(leti=0;i
上传操作中触发图片后续处理方法fileAdd


因为后台要求拿到的图片地址是一串字符串，所以我在下面中使用join()进行数组转化处理（因为后台不支持接受图片数组，因此我这个上传多选图片之后上传也是单张上传）
//添加图片
fileAdd(file,index){
letcsrf_token=this.getCookie('XSRF-TOKEN');
letformFile=newFormData();
letimgName='img0';
formFile.append(imgName,file);
formFile.append("_token",csrf_token);
letname=file.name
letsize=file.size
lettypes='.jpg,.jpeg,.png,.gif'//文件格式
letfileExt=name.substring(name.lastIndexOf('.')).toLowerCase()
letresult=types.indexOf(fileExt)
if(result<0){//验证图片格式
this.$dialog.toast({
mes:'图片格式不正确',
timeout:1000
})
returnfalse
}
if(size>1*1024*1024){
this.$dialog.toast({
mes:'图片大小不能大于1M',
timeout:1000
})
returnfalse
}
if(this.fileList.length>=this.uploadNum){
this.$dialog.toast({
mes:'图片最多只能上传'+this.uploadNum+'张',
timeout:1000
})
returnfalse
}

axios.post(this.upUrl,formFile)
.then((res)=>{
this.upNum=this.fileList.length+1;//计算图片数量
this.fileList.push(file);//添加进图片数组
letimgUrl=this.showUrl+res.data.data;//图片回显地址
letupImg=res.data.data;//传给后台的图片地址
this.imgList.push(imgUrl);
this.upImgList.push(upImg);
letupImgAll=this.upImgList.join(',');
this.$emit('input',upImgAll);
}).catch((err)=>{
console.log(err);
})
},
删除图片操作
我这删除仅仅是对最后提交的图片数组进行处理，并未对上传到图片服务器上的图片进行移除处理
//删除图片
delImg(index){
this.imgList.splice(index,1);
this.fileList.splice(index,1);
this.upNum=this.imgList.length;
letimgAll=this.imgList.join(',');
this.$emit('input',imgAll);
},
最后我在组件中监听了图片改变
watch:{
imgList(){
this.$emit('changeNum');//触发父组件中验证资料是否完整的方法
}
},
就是这样了，一个简易的上传组件（写的不是很好，轻喷），还有可以优化的地方，后面改完再看看吧
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue图片上传组件使用详解

热门推荐

随机推荐