antdv upload+image 实现上传组件中预览为多文件预览功能

antdv的原生upload 显示为单文件预览,如果上传了多个图片的情况下,想要实现图片左右切换跟缩放功能.在此背景下,做了代码实现.

实现思路:

1. 原有的upload 存在 预览功能重写功能
2. image 组件有 标签,可以进行多图片上传,其中的preview属性可以设置一些预览参数,设置是否显示,从第几张开始显示
3. 将其组合实现多图片预览功能
5. 预览:
6. 
7. 点击第一张图片后显示如下:
8. 

代码如下
html

<a-upload
        action="fileUrl"
        :limit="80"
        list-type="picture-card"
        :onSuccess="(res, file) => {
          file[file.length - 1].url = res.response.data
          }"
        v-model:fileList="fileUrlComputed"
        @preview="setVisible"
    >
      <div v-if="form.file.attachment.length < 6">
        <a-icon type="plus"/>
        <div class="ant-upload-text">
          上传
        </div>
      </div>
    </a-upload>
    <div style="display: none">
      <a-image-preview-group :preview="{
        'visible' :openImage,
        'minScale' : 0.1,
        'current' : openIndex,
        onVisibleChange: vis => (openImage = vis)
      }">
        <a-image :width="200" v-for="(item,index) in form.file.attachment" :src="item"/>
      </a-image-preview-group>
    </div>

ts

const openImage = ref<boolean>(false);
const openIndex = ref<number>(0);

const setVisible = (file): void => {
  openImage.value = true;
  openIndex.value = file.index;
};
// 计算属性 封装url
const fileUrlComputed = computed(() => {
  // 本来是计算属性 因为是例子 把原来的删掉 改成如下
  var temp = [
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      index:0,
    },
    {
      uid: '-2',
      name: 'image.png',
      status: 'done',
      url: 'https://aliyuncdn.antdv.com/vue.png',
      index:1,

    },
  ];
  return temp;
});