vue图片上传组件使用详解
vue图片上传组件，供大家参考，具体内容如下
最近在做项目的时候顺便补充了一下公司项目的公共组件库，刚刚手头事情告一段落，就来做个笔记。
首先来看看最终效果
1.不允许删除
2.允许用户删除（显示删除按钮）
实现的效果就是上图显示内容
接下来说说组件布局那部分直接上代码了
<template>
<div class="uploadimg">
<div class="upload-content">
<div class="upload-title">
<p>{{uptitle}}</p>
<p class="show-num">{{upnum}}/{{uploadnum}}</p>
</div>
<ul class="img-list">
<li class="show-img" v-for="(item, index) in imglist" :key="index">
<img :src="item" alt="">
<kk-icon :class="isdel == true ? '' : 'hide-del'" name="error" color="#ff685d" size="0.4rem" @click.native="delimg(index)"></kk-icon>
</li>
<div class="uploadsec">
<img :src="globalpath+'img/insurance/upload.png'" alt="上传图标">
<input type="file" value="" id="choose" @change='onupload' multiple>
</div>
</ul>
</div>
</div>
</template>
上面代码中的kk-icon是自定义的图标组件，只是多了个接受颜色和大小的功能，你们自己写一个替换就行了。然后动态定义它的class，实现显隐就结束了。
随手贴个样式
<style lang="less" type="text/less" rel="stylesheet/less">
.uploadimg{
text-align: left;
.upload-content{
margin-left: 0.3rem;
.upload-title{
display: flex;
justify-content: space-between;
padding: 0.3rem 0.3rem 0.3rem 0;
.show-num{
color: #c9c9c9;
}
}
.img-list{
display: inline-block;
margin: 0.6rem 0.3rem 0.3rem 0;
.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;
}
}
}
}
}
</style>
接下来看看实现逻辑
借助input type="file"实现图片选择，是否允许多选图片的话是通过给input的multiple属性。（其他直接备注在里面了）
在组件中接收父组件传来的图片数量限制，是否开启删除操作，上传图片地址，预览地址等
props: ['imgnum','title','upurl','showurl','showdel'],
title 上传组件的标题
imgnum 上传图片数量限制
upurl 设置上传图片地址
showurl设置图片回显地址
showdel是否允许删除图片
changenum 图片改变时，触发父组件中的方法
当选择图片确定后就会触发change，因此我在@change="onupload" 进行上传，上传使用了formdata
// 上传操作
onupload (e) {
let photofile = e.target
let val = e.target.value
// 判断是否符合上传条件
if (photofile.files.length === 0) return false
for (let i = 0; i < photofile.files.length; i++) {
this.fileadd(photofile.files[i],i)
}
}
上传操作中触发图片后续处理方法fileadd
因为后台要求拿到的图片地址是一串字符串，所以我在下面中使用join() 进行数组转化处理（因为后台不支持接受图片数组，因此我这个上传多选图片之后上传也是单张上传）
// 添加图片
fileadd (file,index) {
let csrf_token = this.getcookie('xsrf-token');
let formfile = new formdata();
let imgname = 'img0';
formfile.append(imgname, file);
formfile.append("_token", csrf_token);
let name = file.name
let size = file.size
let types = '.jpg,.jpeg,.png,.gif' //文件格式
let fileext = name.substring(name.lastindexof('.')).tolowercase()
let result = types.indexof(fileext)
if (result < 0) { //验证图片格式
this.$dialog.toast({
mes: '图片格式不正确',
timeout: 1000
})
return false
}
if (size > 1 * 1024 * 1024) {
this.$dialog.toast({
mes: '图片大小不能大于1m',
timeout: 1000
})
return false
}
if (this.filelist.length >= this.uploadnum) {
this.$dialog.toast({
mes: '图片最多只能上传' + this.uploadnum + '张',
timeout: 1000
})
return false
}
axios.post(this.upurl,formfile)
.then((res) => {
this.upnum = this.filelist.length + 1; //计算图片数量
this.filelist.push(file); //添加进图片数组
let imgurl = this.showurl + res.data.data; //图片回显地址
let upimg = res.data.data; //传给后台的图片地址
this.imglist.push(imgurl);
this.upimglist.push(upimg);
let upimgall = 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;
let imgall = this.imglist.join(',');
this.$emit('input', imgall);
},
最后我在组件中监听了图片改变
watch: {
imglist () {
this.$emit('changenum'); //触发父组件中验证资料是否完整的方法
}
},
就是这样了，一个简易的上传组件（写的不是很好，轻喷），还有可以优化的地方，后面改完再看看吧
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。