vue项目中编写一个图片预览的公用组件

今天产品提出了一个查看影像的功能需求。
在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。
所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。
后来，产品要求图片可以旋转缩放。

废话不多说，贴上代码：

.filePreview { }

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

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

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

},

一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。
我们后端我也是醉了，尽给我找事情，说起来都是泪。

posted on 2018-10-26 15:14 空一座旧城，守一个旧人 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为yinxingen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yinxingen/p/9856473.html