<template>
<div >
<uploader v-model="extant" :after-read="afterRead" :multiple='multiple' :maxCount="maxLen" :before-delete="deleteImgList" :before-read="beforeRead"/>
</div>
</template>
<script>
import { Uploader } from 'vant'
export default {
components: {
Uploader
},
data () {
return {
extant: [],
vueFile: {},
imgList: []
}
},
watch: {
'extantFiles': {
handler: function (val) {
this.getlist(val)
},
immediate: true
}
},
props: {
extantFiles: {
type: Array,
default: function () {
return ''
}
},
maxLen: '',
type: {
type: String,
default: ''
},
multiple: {
type: Boolean,
default: true
}
},
methods: {
beforeRead (file) {
let number = this.extantFiles.length + file.length
this.extantFiles.length
if (number > this.maxLen) {
this.$vux.toast.text('上传图片数量过多')
return false
}
return true
},
afterRead (file) {
this.imgList = []
if (file.length > 0) {
this.imgList = file
this.$emit('imgList', this.imgList)
this.imgList.forEach((item, index) => {
item.loading = false
}) // 为了校验图片是否上传成功
for (let index = 0; index < file.length; index++) {
this.postImg(file[index], index)
}
} else {
this.imgList.push(file)
this.imgList.forEach((item, index) => {
item.loading = false
}) // 为了校验图片是否上传成功
this.$emit('imgList', this.imgList)
let index = 0
this.postImg(file, index)
}
},
postImg (file, index) {
file.status = 'uploading'
file.message = '上传中...'
this.$api.signImgList('get', {action: 'work_order_img'}, res => {
你的上传请求
this.imgList[index].loading = true
if (this.imgList.length > 0) {
let loading = this.imgList[this.imgList.length - 1].loading // 为了校验图片是否上传成功
if (loading) {
file.status = ''
file.message = ''
}
}
}).catch(err => {
// alert(JSON.stringify(err))
console.log('err', err)
file.status = 'failed'
file.message = '上传失败'
this.extant.forEach((item, index) => {
if (item.name === file.name) {
this.extant.splice(index, 1) // 上传失败后清除正在上传的图片
}
})
})
},
deleteImgList (file) {
this.extantFiles.forEach((item, index) => {
if (item.fileUrl === file.fileUrl) {
this.extantFiles.splice(index, 1)
}
})
},
//从父组件拿需要渲染的图片列表
getlist (val) {
this.extant = val
for (let i = 0; i < this.extant.length; i++) {
this.extant[i].url = this.extant[i].fileUrl
}
}
}
}
</script>
<style>
.van-uploader__preview-image {
display: block;
width: 65px;
height: 65px;
overflow: hidden;
}
.van-uploader__upload {
width: 65px;
height:65px;
}
</style>
```go
afterRead 里面上传到服务器自己可以修改请求