vue项目中实现图片预览的公用组件功能

今天产品提出了一个查看影像的功能需求。

在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。

所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。

后来，产品要求图片可以旋转缩放。

废话不多说，贴上代码：

  .filePreview{
    .imgList{
      .el-dialog__headerbtn{
 font-size:26px;
      }
      .el-dialog__body{
 .allImg{
   width:30%;
   float:left;
   height:600px;
   img{
     width: 150px;
     height: 150px;
     margin: 5px;
     cursor: pointer;
   }
   .changeColor{
     border:4px solid #409eff;
   }
 }
      }
    }
    .originStyle{
      position:absolute;
      left:0;top:0;
      cursor: pointer;
      // transform-origin: 50% 50%;
    }
    #test_3{
      position: relative;
      width: 600px;
      height: 400px;
      overflow: hidden;
      // overflow: scroll;
      & > p{
 position: absolute;
 cursor: move;
 transform-origin: center;
 width: 100%;
 height: 100%;
 padding: 0;
 -webkit-margin-before: 0;
 -webkit-margin-after: 0;
 left: 0;
 top: 0;
 & > img{
   display: inline-block;
   vertical-align: middle;
 }
      }
    }
  }

后来出现一个问题，有一类的单据的图片存储在数据库中，之前的图片都是存储在服务器中，只需要传入单据号查询返回给我图片路径即可。

而存储在数据库当中不一样，需要拼接路径，一下是解决方法：

preview(){

    if(this.imgList.length > 0){
      this.imgList.map(item=>{
 item.furl = process.env.APP_EXCEL_PATH+'portal/gys/querydownloadPurchaFile?fileid='+ item.FILEID +'&gysdh='+item.CREATENAME //接口加入参
      })
    }
    this.num = this.imgList.length
    this.furl = this.imgList[0].furl
    this.changeColor = 0
},

一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。

总结

以上所述是小编给大家介绍的vue项目中实现图片预览的公用组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！