使用vant-uploader上传照片无法删除的解决

 更新时间:2022年10月20日 11:26:43   作者:Pomprogram  
这篇文章主要介绍了使用vant-uploader上传照片无法删除的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant-uploader上传照片无法删除

在微信小程序使用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的下标,自己根据需要进行操作就行
  },

一些关于vant-uploader的前端问题

首先要引入vant和vue,参考官方地址。vant-uploader的定义,实现和引入详见官方地址,这里不再一一列举。

本文写一些前端开发方面遇到的问题。

1.afterRead和beforeRead有时不能同时执行的问题。

解决方案:beforeRead要执行返回True之后才可以执行afterRead 。

<van-uploader :before-read="beforeRead" :after-read="afterRead" />
export default {
  methods: {
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
                    }
      return true;
              },
   afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
              },
          },
};

van-uploader允许上传的文件类型默认为image/*,一般直接写afterRead就可以了。

2.实现实时向服务器提交,删除文件。

项目需求是上传和删除与服务器同步,删除图片的同时需要从服务器端也删除图片。

由于vant-uploader本质也是image+input实现的。

原有的方法是给input直接绑定id,用ajaxFileUploader方法实时更新后台的图片文件,缺点是一次性只能选择一张图片。

于是我们可以动态给vant-uploader控件里的input框动态添加id,以此实现delete时候后端也可以即时删除图片的操作。

function delImg(index){
let ind = vue.$data.imgContList.indexOF(index);
vue.$data.imgContList.splice(ind,1);
console.log(vue.$data.imgContList);
let delUploader =document/getElementByClassName("van-uploader__preview-delete");
for(let i=0;i<vue.$data.imgContList.length;i++){
$(delUploader[i]).removeAttr("id").attr("id","removeClose_4_"+(vue.$data.imgCountList[i]));
$(delUploader[i]).removeAttr("onclick").attr("onclick","delImg("+(vue.$data.imgCountList[i])+")");
}
}

3.一些样式的修改具体参考官网api或者直接修改vant.css里关于uploader的css样式即可。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中安装element-ui失败问题原因及解决

    Vue中安装element-ui失败问题原因及解决

    Vue中安装element-ui失败问题原因及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue实现可拖拽组件的方法

    Vue实现可拖拽组件的方法

    这篇文章主要为大家详细介绍了Vue实现可拖拽组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3响应式对象是如何实现的(1)

    Vue3响应式对象是如何实现的(1)

    这篇文章主要介绍了Vue3响应式对象是如何实现的,文章围绕主题展开详细的内容介绍具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 详解如何添加babel polyfill

    详解如何添加babel polyfill

    这篇文章主要介绍了详解vue如何添加babel polyfill实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue使用canvas绘制圆环

    vue使用canvas绘制圆环

    这篇文章主要介绍了vue使用canvas绘制圆环,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解vue-cli快速构建vue应用并实现webpack打包

    详解vue-cli快速构建vue应用并实现webpack打包

    这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue中的请求拦截器和响应拦截器用法及说明

    Vue中的请求拦截器和响应拦截器用法及说明

    这篇文章主要介绍了Vue中的请求拦截器和响应拦截器用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vuex中的state属性解析

    vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 简单聊一聊Vue3组件更新过程

    简单聊一聊Vue3组件更新过程

    我们不光要学会Vue的组件化实现过程,还要懂得组件数据发生变化,更新组件的过程,这篇文章主要给大家介绍了关于Vue3组件更新过程的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue+node实现图片上传及预览的示例方法

    vue+node实现图片上传及预览的示例方法

    这篇文章主要介绍了vue+node实现图片上传及预览的示例方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论