Ext 实现本地多图片轮播预览 (详细)

前言
最近接手了一个老项目用的ext，前后端不分离的。我一个后端程序员，只能硬着头皮做了，期间遇到一个关于预览图片的问题，找了很多资料最后解决。

. 前端环境 ext 6.0
. 后端环境 springboot 2.x

1. 第一步，我们首先要保证文件已经上传到本地，这一步就省略了，默认大家都已经把文件上传至本地，我自己放在了c盘如下图
   

2. 第二步 保证本地图片可以被直接访问，要达到这个目的我们需要配置一下springboot的资源映射

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 配置资源映射路径
 * */
@Configuration
public class UploadFilePathConfig implements WebMvcConfigurer {
    private static String UPLOAD_PATH = "upload";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //  /gbx/file/**为前端URL访问路径  后面 file:xxxx为本地磁盘映射
        registry.addResourceHandler("/gbx/file/**").addResourceLocations("file:C:" + UPLOAD_PATH + "/");
    }
}

这样我们就可以通过访问http://127.0.0.1:27103/gbx/file/NO20210223091933/230753-1546009673d138.jpg 来访问到C盘下NO20210223091933/230753-1546009673d138.jpg 文件了
3. 第三步 我们开始写前端ext的代码，这里我贴出重要部分代码

                                        // 模型
                            Ext.define('ParkingAttachment', {
                                extend: "Ext.data.Model",
                                idProperty: 'id',
                                fields: [
                                    {name: 'id'},
                                    {name: 'parkingId'},
                                    {name: 'attachment'},
                                    {name: 'attachmentName'},
                                    {name: 'attachmentUrl'}
                                ]
                            });
                            var repairCode = Ext.getCmp('repairCode').getValue();
                            // 存储
                            var parkingAttachmentStore = Ext.create('Ext.data.Store', {
                                model: 'ParkingAttachment',
                                proxy: {
                                    type: 'ajax',
                                    actionMethods: {
                                        read: "POST"
                                    },
                                    url: 'customerrepair/getParkingAttachment',
                                    reader: {
                                        type: 'json'
                                    },
                                    //repairCode 参数大家看情况加
                                    extraParams: {
                                        repairCode: repairCode
                                    },
                                }
                            });
                            parkingAttachmentStore.load({
                                callback: function (r, options, success) {
                                    if (success) {
                                        for (var i = 0; i < r.length; i++) {
                                            var record = r[i];
                                            var v = record.data.attachmentUrl;
                                            //alert(v);
                                        }
                                        Ext.create('Ext.window.Window', {
                                            title: '图片预览',
                                            height: 700,
                                            width: 1000,
                                            // layout: 'fit',
                                            autoScroll: true,
                                            items: {
                                                xtype: 'dataview',
                                                store: parkingAttachmentStore,
                                                reference: 'dataview',
                                                itemSelector: 'div.card',
                                                tpl: [
                                                    //设置展示模板
                                                    '<tpl for=".">',
                                                    '<div class="card">',
                                                    '<div class="upload-progress"><input type = "checkbox" name="imgPrimaryId" value="{id}"/></div>',
                                                    '<div><img src="{attachmentUrl}" style="height: 300px;width:300px;vertical-align:middle;" /></div>',
                                                    '<div style="text-align:center"><span>{attachmentName}</span></div>',
                                                    '</div>',
                                                    '</tpl>'
                                                ],
                                                listeners: {
                                                    itemcontextmenu: function (view, record, item, index, e, eOpts) {
                                                        //禁用浏览器的右键相应事件
                                                        e.preventDefault();
                                                        e.stopEvent();
                                                        var menu = new Ext.menu.Menu({
                                                            //控制右键菜单位置
                                                            float: true,
                                                            items: [{
                                                                text: "预览",
                                                                iconCls: 'fa fa-file-image-o',
                                                                handler: function () {
                                                                    this.up("menu").hide();
                                                                    showImg(record.data.attachmentUrl, parkingAttachmentStore);
                                                                }
                                                            }
                                                            ]
                                                        }).showAt(e.getXY());//让右键菜单跟随鼠标位置
                                                    }
                                                }
                                            }
                                        }).show();

相关的函数

function showImg(url, store) {
    var iHeight = window.screen.height;
    var iWidth = window.screen.width;
    //var store = Ext.getCmp('AdImgMainView').down('imgcard').down('dataview').getStore();
    window.open('./AdvresouceSwipper/listImg.html', '', 'height=' + iHeight + ', width=' + iWidth + ', top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') //这句要写成一行
    setImgArr(store, url);

}

//根据缩略图,缩略视频store获取缩略图管理的列表图
function setImgArr(store, url) {
    imgMap = {};
    var imgArr = [];
    var dataArr = store.data.items;
    if (dataArr.length > 0) {
        $.each(dataArr, function (index, item) {
            // alert(item.data);
            imgArr.push(item.data);
        })
    }
    ;
    imgMap.imgArr = imgArr;
    imgMap.currentUrl = url;

    return imgMap;
}

function getImgArr() {
    return imgMap

4. 第四步listImg.html文件(用于展示轮播的html页面)
   目录结构如下
   

相关资源文件我放在百度云盘了，大家可以自行下载
链接：https://pan.baidu.com/s/1C4Y6y_uVMvt-5FjXMX-zHg
提取码：6jif
另外springboot1.x默认读取static下面文件，如果大家使用springboot2.x可能会出现listImg.html加载不到js和css情况，大家可以在pom文件加上

5. 第五步启动项目即可
   

图片上右键点击预览就可以看到轮播图片

ok 有什么问题可以在下面留言。