大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天产品提出了一个查看影像的功能需求。
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了无棣免费建站欢迎大家使用!
在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示。而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮。
所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去。
后来,产品要求图片可以旋转缩放。
废话不多说,贴上代码:
后来出现一个问题,有一类的单据的图片存储在数据库中,之前的图片都是存储在服务器中,只需要传入单据号查询返回给我图片路径即可。
而存储在数据库当中不一样,需要拼接路径,一下是解决方法:
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项目中实现图片预览的公用组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!