vben5 ImageUpload 模块多图预览功能

新空20222026-03-25 11:22

upload 中自定义回调预览回调逻辑

ini 复制代码

<template>
  <div>
    <Upload
      v-bind="$attrs"
      v-model:file-list="fileList"
      :accept="getStringAccept"
      :before-upload="beforeUpload"
      :custom-request="customRequest"
      :disabled="disabled"
      :list-type="listType"
      :max-count="maxNumber"
      :multiple="multiple"
      :progress="{ showInfo: true }"

      @preview="handlePreview"
      @remove="handleRemove"
    >

    <!--修改为多图预览-->
    <div style="display: none" >
      <ImagePreviewGroup :preview="{ visible,current:current, onVisibleChange: vis => (visible = vis) }">
        <Image v-for="item in fileList"
          :src="item.url"
        />
      </ImagePreviewGroup>
    </div>
  </div>
</template>

handlePreview 回调

计算current 图片索引和开启预览

ini 复制代码

/** 处理图片预览 */
async function handlePreview(file: UploadFile) {

  if (!file.url && !file.preview) {
    file.preview = await getBase64<string>(file.originFileObj!);
  }
  current.value= fileList.value.findIndex((item) => item.url === file.url);

  previewImage.value = file.url || file.preview || '';
  previewOpen.value = true;
  visible.value = true;
  previewTitle.value =
    file.name ||
    previewImage.value.slice(
      Math.max(0, previewImage.value.lastIndexOf("/") + 1)
    );
}