vue2 el-upload结合v-viewer实现图片上传预览

废话不多说直接上代码，只写了图片预览部分，上传部分代码可以根据业务自己书写

//main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上
  },
});


//upload组件

//图片集合根据自己业务定义fileList:[
//    {
        url:'xxxxxxxx'
//    }
//]
    <el-upload
      multiple
      action="#"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      :http-request="handleChange"
      :show-file-list="true"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
      <div
        style="width: 100%; height: 100%; text-align: center"
        slot="file"
        slot-scope="{ file }"
      >
        <div
          style="width: 100%; height: 100%"
          class="images"
          v-viewer="{ movable: false }"
        >
          <img style="width: 100%; height: 100%" :src="file.url" />
        </div>
        <span class="el-upload-list__item-actions">
          <span
            title="预览图片"
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            title="删除图片"
            class="el-upload-list__item-delete"
            @click="handleDelete(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>


//script
    // handleBeforeUpload
    // 可以在这里做上传之前判断、文件格式、文件大小等。。。
    handleBeforeUpload(){},
    // 上传图片
    handleChange(e) {
        var formData = new FormData();
        formData.append("file", e.file);
        // 上传接口
        comenUpload(formData).then((res) => {
        });
    },
    // handleUploadSuccess(){}
    handleUploadSuccess(){
        //上传成功回掉函数。。。。
    }
    // 预览
    handlePictureCardPreview(file) {
      let initialViewIndex; // 当前点击图片索引
      let images = this.fileList.map((item, index) => {
        if (file.url == item) {
          initialViewIndex = index;
        }
        return item.url;
      });
      // 图片预览核心操作
      this.$viewerApi({
        options: {
          initialViewIndex,
        },
        images,
      });
    },
    // 删除 根据不同业务自己写
    handleDelete(){}