vant van-uploader上传失败后点击预览图片重新上传

2 篇文章 0 订阅
          <van-uploader
              v-model="form.attachList"
              ref="uploader"
              :after-read="afterRead"
              :preview-size="100"
              :deletable="false"
              :max-count="maxCount"
              :preview-full-image="false"
              @click-preview='clickPreview'
            >
              <template
                slot="preview-cover"
                slot-scope="{ type, time }"
              >
				<--这里使用了type判断是不是上传失败-->
				<--使用time区分每一张图片-->
                <div
                  v-if="type === 'fail'"
                  class="preview-cover preview-cover__mask"
                >
                  <div
                    class="preview-cover__icon"
                    @click="onDeleteFailPic($event, time)"
                  >
                    <van-icon name="cross" />
                  </div>
                  <div>
                    <div>上传失败</div>
                    <div>点击重新上传</div>
                  </div>
                </div>
              </template>
            </van-uploader>

method部分:

    // 点击失败照片 重新上传
    clickPreview(file, datail) {
      const { index } = datail;

      if (file.attachId) {
      // 如果有attachId 说明这是已经成功上传的照片,
      // 点击预览小图时,就直接显示全屏预览图
        // 预览照片 
        ImagePreview({
          images: this.form.attachList.map((item) => item.link),
          startPosition: index,
        });
        return;
      }

      // 处理失败照片
      this.form.attachList = this.form.attachList.map((ele) => {
        if (ele.file && ele.file.lastModified === file.file.lastModified) {
          ele.type = "";
        }
        return ele;
      });
      // 使用之前已经打水印的照片
      let File = file.file;

      file.status = "uploading";
      file.message = "上传中...";

      this.maxCount = this.form.attachList.length;

      Toast.loading({
        mask: false,
        message: "上传中...",
        duration: 0,
      });
	
	// 重新上传
      return new Promise((resolve) => {
        this.attachUpload(file, File).then(() => {
          resolve();
        });
      });
    },```

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值