vant-uploader上传照片无法删除

最新推荐文章于 2024-03-26 19:00:00 发布

原创最新推荐文章于 2024-03-26 19:00:00 发布 · 6.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了在微信小程序中使用 vant-uploader 组件时遇到的问题，即点击图片右上角删除图标无法删除图片。问题源于组件内部仅触发了'delete'事件，而未提供内置的删除功能。解决方法是监听这个事件并在父组件中定义相应的删除函数。在XML中添加`catch:delete`属性，并在JS中编写删除操作，通过事件传入的index删除对应图片。

在微信小程序使用vant-uploader上传图片时，发现点击右上角的小叉叉无法删除图片，查看了源码：

（源码位置：miniprogram\miniprogram_npm@vant\weapp\uploader\index.js）

    deleteItem: function (event) {
      var index = event.currentTarget.dataset.index;
      this.$emit(
        'delete',
        __assign(__assign({}, this.getDetail(index)), {
          file: this.data.fileList[index],
        })
      );
    },

发现里面点击删除只是向父组件传递了一个名为’delete’的事件，该事件包含点击的图片的下标。为了达到删除的目的，我们还需自己定义对应的删除函数。

解决方法：
在XML里获取delete事件，其中’deleteImg’为自定义的删除照片的操作：

    <van-uploader catch:delete="deleteImg" preview->      
   
    </van-uploader>

在JS里，写自己需要进行的操作：

  deleteImg(event){
    let index= event.detail.index
    console.log(index)//输出的就是图片所在fileList的下标，自己根据需要进行操作就行
  },