参考代码如下
<template>
<div>
{{ fileList }}
<!-- :file-list="fileList" -->
<van-uploader
:file-list="fileList"
:fileList="fileList"
@after-read="afterRead"
@delete="handleDelete"
:show-upload="showUpload"
:deletable="deletable"
:max-count="10"
accept="image"
multiple
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
defaultPhoto: {
type: Array,
default: () => [],
},
showUpload: {
type: Boolean,
default: true,
},
deletable: {
type: Boolean,
default: true,
},
})
const fileList = ref([
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
type: 'image',
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
type: 'image',
},
{
url: 'https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1709053200&t=42ce510733b1cbad5a8e12b068744c37',
type: 'image',
},
])
setTimeout(() => {
fileList.value.push({
url: 'https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1709053200&t=42ce510733b1cbad5a8e12b068744c37',
type: 'image',
})
}, 1000)
const handleDelete = (e) => {
console.log('index', e.target.index)
const { index } = e.target
fileList.value.splice(index, 1)
console.log('fileList.value', fileList.value)
}
const afterRead = (event) => {
const { file } = event.detail
console.log('afterRead event', event)
fileList.value.push({
url: 'https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1709053200&t=42ce510733b1cbad5a8e12b068744c37',
type: 'image',
})
}
</script>
<style lang="scss" scoped></style>
不管怎么操作fileList,页面视图不会发生变更,只有第一次生效。