效果
组件
<style scoped>
.image-wrapper{
padding:10px 10px;
}
.inputer{
width:100px;
height:100px;
display:none;
}
.img-wrapper{
display:flex;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
}
.image-wrapper .upload-icon{
margin-left:14px;
margin-bottom:10px;
/* overflow: hidden; */
width:20%;
height:70px;
text-align: center;
border:1px solid #dbdbdb;
}
.img-wrapper .item{
position:relative;
margin-left:14px;
margin-bottom:10px;
/* overflow: hidden; */
width:20%;
height:70px;
text-align: center;
}
.img-wrapper .item .dis-image{
width:100%;
height:70px;
}
.image-wrapper .item .delete {
display:inline-block;
position:absolute;
background-color: #dbdbdb;
width: 20px;
height: 20px;
color: #fff;
font-size: 0.8em;
border-radius: 50%;
top:-9px;
right:-10px;
}
.img-wrapper .item .heng{
position: absolute;
display:inline-block;
width:30px;
height:3px;
background:#dbdbdb;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.img-wrapper .item .su{
position: absolute;
display:inline-block;
width:3px;
height:30px;
background:#dbdbdb;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<template>
<div>
<div class="image-wrapper">
<div class="img-wrapper">
<div class="item" v-for="(item, index) in imgList"><img :src="item" class="dis-image"><span class="delete" @click="deleteImg(index)">X</span></div>
<div class="item upload-icon" @click="preSelect" v-if="imgList.length < fileCount">
<span class="heng"></span>
<span class="su"></span>
</div>
</div>
<input type="file" class="inputer" ref="inputRef" @change="handleChange" multiple="multiple" >
</div>
<alert v-model="showError" title="添加失败">{{errorMsg}}</alert>
</div>
</template>
<script>
import { Alert } from 'vux';
export default {
components: {
Alert
},
name: 'imgUpload',
props: {
fileMaxSize: {
type: Number,
required: false,
default: 200
},
fileCount: {
type: Number,
required: false,
default: 1
},
fileType: {
type: String,
required: false,
default: 'image/png, image/jpeg'
}
},
data () {
return {
imgList: [],
showError: false,
errorMsg: ''
};
},
methods: {
preSelect () {
this.$refs.inputRef.click();
},
handleChange (e) {
/* eslint-disable */
let BreakException = {};
let file = e.currentTarget.files;
if (file.length > this.fileCount || this.imgList.length > this.fileCount) {
this.showError = true;
this.errorMsg = '最多上传' + this.fileCount + '张图片';
return;
}
try {
_.forEach(file, element => {
if (!element.type || this.fileType.indexOf(element.type) === -1) {
this.showError = true;
this.errorMsg = '图片类型错误';
throw BreakException;
} else if (element.size > this.fileMaxSize * 1024) {
this.showError = true;
this.errorMsg = '图片太大请重新上传';
throw BreakException;
}
});
} catch (error) {
if (e !== BreakException) throw e;
}
_.forEach(file, element => {
let freader = new FileReader();
freader.readAsDataURL(element);
freader.onload = (e) => {
this.imgList.push(e.target.result)
};
});
},
deleteImg (ind) {
this.imgList.splice(ind,1);
}
}
};
</script>
组件引入
最后,功能还在完善中,会不定时更新
对学习抱有热情的开发小伙伴欢迎加入 qq群685421881,更欢迎热爱编程的妹子进入,让我们一起学习 并进步吧!