<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();
});
});
},```