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; //传给后台的图片地址
