小日
小日
  • 发布:2024-02-27 11:46
  • 更新:2024-04-01 16:37
  • 阅读:318

uniapp中使用vant-weapp的uploader组件,fileList无法实现双向绑定

分类:uni-app

参考代码如下


<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,页面视图不会发生变更,只有第一次生效。

2024-02-27 11:46 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

请问一下,这个问题解决了吗?我也遇到了同样问题

要回复问题请先登录注册