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

本文链接：https://blog.csdn.net/qq_37806753/article/details/113991935

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

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

第一步，我们首先要保证文件已经上传到本地，这一步就省略了，默认大家都已经把文件上传至本地，我自己放在了c盘如下图
第二步保证本地图片可以被直接访问，要达到这个目的我们需要配置一下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'},
                                    {