当前位置: 首页 > 工具软件 > v-uploader > 使用案例 >

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

宇文勇
2023-12-01
          <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();
        });
      });
    },```

 类似资料: