vue文件预览系列--图片篇

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

  此系列实战技术为vue3+element-plus。是笔者在工作项目中常使用的技术之一，文件预览根据文件类型不同需要不同的标签和组件，这里第一篇先介绍最简单的图片。

1 图片基础

  图片预览技术是项目中最常用的技术之一。我在项目使用中把图片地址分为链接形式和base64码形式俩种。

最基础的html原生标签img:

<img src="./01.png" alt="">
<img src="data:image/jpeg;base64,xxxx==" alt="">

1、使用链接形式可以放入网络链接，或者放入相对路径地址（相对于当前html文件位置而言）；
2、使用base64编码形式便于处理一些小文件类型的图片，过大需要考虑后端发送地址的完整性；

使用组件el-image可以使用原生的所有写法；另外，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等。

<el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />

2 图片预览

同样使用el-image组件，可通过 previewSrcList 开启预览大图的功能。 你可以通过 initial-index 初始化第一张预览图片的位置。 默认初始位置为 0。

<el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />

src对应的url地址是初始显示的图片；srcList则是数组，参考数据：

var srcList=[
  './01.png',
  'data:image/jpeg;base64,xxxx==',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
]

这些地址同样可以是相对路径、网络链接、base64编码。

实现效果：

组件自带工具栏，自带图片切换功能、放大缩小、旋转等功能。

注：在项目中使用时，注意使用v-bind(:)变量赋值；
例：
  :src="url"
  :src="data:image/png;base64, + url"

这个组件在plus版本中没有太大变化，使用中应主要考虑图片数组的获取，笔者再使用该组件时，需要针对el-tree树文件夹结构中的所有图片文件。

扩展： 针对类似el-tree结构的对象数组，取出所需值得一个递归方法。（matchType方法是我封装的一个检测文件类型的方法，picArray就是图片数组）。

    checkData(arr){
      for (let i = 0; i < arr.length; i++) {
        if(matchType(arr[i].name)==='image'){
          this.picArray.push(arr[i].id)
        }else if(arr[i].children && arr[i].children.length>0){
          this.checkData(arr[i].children)
        }
      }
    },