<template>
<div class="upload-img-outline">
<template v-if="imgUrlB && imgUrlB.length>0">
<div
v-for="(item, index) in imgUrlB"
:key="index"
class="image-preview"
>
<div class="upload-main">
<van-image :src="item? item : imageBg" @click="viewPic(item)" />
<div class="van-uploader__preview-delete">
<van-icon class="van-uploader__preview-delete-icon" name="cross" @click="deleteImg(index)" />
</div>
</div>
</div>
</template>
<van-uploader
v-show="imgUrlB.length<maxCount"
ref="uploader"
:multiple="true"
:max-size="6000 * 1024"
:max-count="maxCount"
accept="image/png, image/jpeg"
:disabled="disabled"
:before-read="beforeRead"
@delete="deleteImg"
@oversize="onOversize"
>
<template>
<div class="upload-main">
<van-image :src="imageBg" />
<div class="bottom">{{ imageText }}</div>
</div>
</template>
</van-uploader>
<div v-if="loading" class="loading-outline">
<van-loading color="#5264E7" vertical>上传中……</van-loading>
</div>
</div>
</template>
<script>
import { uploadIdCard, uploadWithoutLogo, uploadIdBusiness } from 'api/file/upload'
import { ImagePreview, Toast } from 'vant'
export default {
name: 'UploadImage',
// import引入的组件需要注入到对象中才能使用
components: { [ImagePreview.Component.name]: ImagePreview.Component },
model: {
prop: 'image',
event: 'modelChange'
},
props: {
imgUrls: { // 储存图片路径
type: [Array],
default: function() {
return []
}
},
disabled: {
type: Boolean,
default: false
},
deletable: {
type: Boolean,
default: true
},
maxCount: {
type: Number,
default: 1
},
cardType: {
type: Number,
default: 0 // 0-图片
},
front: {
type: Number,
default: null /
}
},
data() {
return {
loading: false,
imageBg: require('@/assets/images/upload-img/pic.png'),
imageText: '点击上传'
}
},
computed: {
imageUrl: {
get() {
return this.image
},
set(val) {
this.$emit('modelChange', val)
}
},
imgUrlB: {
get() {
console.log('this.imgUrls: ', this.imgUrls)
return this.imgUrls
},
set(val) {
this.$emit('update:imgUrls', val)
}
}
},
methods: {
onOversize(file) {
this.$toast('文件大小不能超过 6M')
},
beforeRead(file) {
if (file.length > 1) {
console.log(file.length, this.maxCount)
if (file.length > Number(this.maxCount)) {
Toast('请选择少于' + this.maxCount + '张的图片')
return false
} else {
file.map(item => {
if (item.type !== 'image/jpeg' && item.type !== 'image/png') {
this.$toast('请上传 图片 格式文件!')
return false
}
setTimeout(() => {
this.imgFileUpload(item)
}, 1000)
})
}
} else {
if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
this.$toast('请上传 图片 格式文件!')
return false
}
setTimeout(() => {
this.imgFileUpload(file)
}, 100)
}
},
imgFileUpload(file) {
this.loading = true
const postParam = new FormData()
postParam.append('file', file)
postParam.append('suffixPath', 'image')
postParam.append('front', this.front)
let methods = null
switch (Number(this.cardType)) {
case 0:
methods = uploadWithoutLogo
break
case 1:
methods = uploadIdCard
break
case 2:
methods = uploadIdCard
break
case 3:
methods = uploadIdBusiness
break
default:
break
}
methods(postParam).then(res => {
// console.log(res)
this.loading = false
if (this.maxCount > 1) {
this.imgUrls.push(res.data.url)
}
this.emitUrls()
}).catch(errors => {
this.loading = false
Toast.fail('上传失败!')
console.error(errors)
})
},
deleteImg(index) {
this.imgUrlB.splice(index, 1)
this.$emit('update:imgUrls', this.imgUrls)
this.$forceUpdate()
this.emitUrls()
},
emitUrls(val) {
this.$emit('emitUrls', this.imgUrls)
},
// 图片预览
viewPic(item) {
ImagePreview({
images: [item],
showIndex: false
})
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.upload-img-outline {
display: flex;
flex-wrap: wrap;
.image-preview {
width: 100px;
height: 100px;
margin-left: 10px;
position: relative;
border: 1px solid #d9d9d9;
border-radius: 5px;
display: inline-block;
overflow: hidden;
// object-fit: cover;
/deep/.upload-main{
.van-image__img{
width: 100px;
height: 100px;
object-fit: cover;
}
}
.van-uploader__preview-delete {
width: 24px;
height: 24px;
background-color: rgba(0,0,0,.5);
border-radius: 0 0 0 16px;
.van-uploader__preview-delete-icon {
font-size: 24px;
}
}
}
.van-uploader{
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
.bottom{
text-align: center;
}
}
}
</style>
应用
<UploadImages :key="timer" :img-url.sync="form.placeImages" :max-count="3" @emitUrls="emitUrls" />