当前位置 : 主页 > 网络编程 > JavaScript >

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

来源:互联网 收集:自由互联 发布时间:2023-02-01
目录 vant-uploader上传照片无法删除 解决方法 一些关于vant-uploader的前端问题 vant-uploader上传照片无法删除 在微信小程序使用 vant-uploader 上传图片时,发现点击右上角的小叉叉无法删除图
目录
  • vant-uploader上传照片无法删除
    • 解决方法
  • 一些关于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样式即可。 

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持自由互联。

    上一篇:使用jQuery实现简单穿梭框方式
    下一篇:没有了
    网友评论