You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.0 KiB
105 lines
2.0 KiB
<template>
|
|
<view>
|
|
<uv-upload
|
|
:fileList="displayFileList"
|
|
:accept="accept"
|
|
:maxCount="maxCount"
|
|
:width="width"
|
|
:height="height"
|
|
@afterRead="afterRead"
|
|
@delete="deleteFile"
|
|
>
|
|
<button class="flex btn">
|
|
<image class="btn-icon" src="@/static/image/icon-plus.png" mode="widthFix" />
|
|
</button>
|
|
</uv-upload>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: 'image' // all | media | image | file | video
|
|
},
|
|
width: {
|
|
type: Number | String,
|
|
default: 190,
|
|
},
|
|
height: {
|
|
type: Number | String,
|
|
default: 190,
|
|
},
|
|
maxCount: {
|
|
type: Number | String,
|
|
default: 100,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
fileList: {
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
get() {
|
|
return this.value
|
|
}
|
|
},
|
|
displayFileList() {
|
|
return this.fileList.map(url => ({ url }))
|
|
},
|
|
},
|
|
watch: {
|
|
fileList: {
|
|
handler(val) {
|
|
console.log('watch fileList', val)
|
|
},
|
|
deep: true,
|
|
},
|
|
displayFileList: {
|
|
handler(val) {
|
|
console.log('watch displayFileList', val)
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
deleteFile(e){
|
|
console.log('deleteFile', e)
|
|
const fileList = [...this.fileList]
|
|
fileList.splice(e.index, 1)
|
|
this.fileList = fileList
|
|
},
|
|
afterRead(e){
|
|
this.$Oss.ossUpload(e.file.url).then(url => {
|
|
this.fileList = this.fileList.concat(url)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.btn {
|
|
width: 190rpx;
|
|
height: 190rpx;
|
|
background: #F3F2F7;
|
|
border-radius: 16rpx;
|
|
|
|
&-icon {
|
|
width: 61rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|