通过ajax进行文件上传及回显并解决后台返回图片路径却不能直接显示问题

1、选中图片立刻回显

前端代码

<div class="row" id="uplodFilel">
<div class="col-md-8">
<label>上传身份证正面</label>
<input id="inp1" type="file" class="btn btn-primary" value="上传身份证正面"/>
</div>
<div class="col-md-4">								
<img id="img1" src="" alt="上传身份证反面" class="img-thumbnail">
</div>
</div>

js部分
使用jquery的serialize方法并不能处理，包含文件流的表单，这时，需要使用 dom 的 FormData 对象；
FormData是dom对象，而不是jquery对象；使用get方法或者 [] 将jquery对象转换为 dom 对象
使用FormData进行文件上传操作，创建一个FormData对象（注意将jquery对象转换为dom对象）

var formData=new FormData();
formData.append('upfile',$(this)[0].files[0]);

//预览效果
			$('#inp1').change(function () {
			let inp= $('#inp1').val();
			console.log("inp:",inp);
			var formData=new FormData();
				formData.append('upfile',$(this)[0].files[0]);
			$.ajax({
				url:'/uploadfile/image',
				data:formData,
				type:'post',
				processData: false,// 不处理数据
				contentType: false, // 不设置内容类型
				success(result){
					if(result!=null){
					    console.log("result:",result.data.img);
						let src=result.data.img;
						$('#img1').attr('src',src);
						// var img1="<img id='img1' src='"+ src +"' alt='上传身份证正面' class='img-thumbnail'>"
						// $('#img1').html(img1);
					}
				}
			})
				return false;
			})

cotroller部分

@RestController
@RequestMapping("/uploadfile")
public class UploadfileController {

        @RequestMapping("/image")
        @ResponseBody
        public R image(@RequestParam("upfile") MultipartFile file){
            //调用工具类完成文件上传
            System.out.println("file:"+file);
            String imagePath = UploadUtils.upload(file);
            System.out.println(imagePath);
            }

utils工具类

 public class UploadUtils {
    //定义一个上传文件的路径
    private static final String BASE_PATH = "D:\\12+Project_Train\\jdym_train\\jdym_web\\jdym_front\\src\\main\\resources\\static\\upload";
    //定义文件服务器的访问地址
    private static  final String SERVER_PATH="/upload/";
    public static String upload(MultipartFile file){
        //获得上传文件的名称
        String filename = file.getOriginalFilename();
        //创建UUID，用来保持文件名字的唯一性
        String uuid = UUID.randomUUID().toString().replace("-","");
        //进行文件名称的拼接
        String newFileName = uuid+"-"+filename;
        //创建文件实例对象
        File uploadFile = new File(BASE_PATH,newFileName);
        //判断当前文件是否存在
        if (!uploadFile.exists()){
            //如果不存在就创建一个文件夹
            uploadFile.mkdirs();
        }
        //执行文件上传的命令
        try {
            file.transferTo(uploadFile);
        } catch (IOException e) {
            return null;
        }
        //将上传的文件名称返回，注意，这里我们返回一个 服务器地址
        return SERVER_PATH+newFileName;
    }

    public static void delete(String filename){
        File file = new File(BASE_PATH, filename);
        if (file.exists()){
            file.delete();
        }
    }
}

在这里遇到问题：
上传图片完成，将图片路径返回前端却不能显示出来，无法加载此图片
解决：原因：这是因为对服务器的保护措施导致的，服务器不能对外部暴露真实的资源路径，需要配置虚拟路径映射访问

配置类SpringMvcWebConfigSupport

@Configuration
public class SpringMvcWebConfigSupport implements WebMvcConfigurer {

    /**
     * 默认访问的是首页 //保留了SpringBoot的自动配置，也使用了自己的SpringMmv的配置
     * @param registry
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");//前拼templates，后拼.html
        registry.addViewController("/index.html").setViewName("index");//浏览器发送/请求来到login.html页面，不用写controller控制层的请求方法了
    }

    /**
     * 将static下面的js，css文件加载出来
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //registry.addResourceHandler("/static/").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/upload/**").addResourceLocations("file:D:\\12+Project_Train\\jdym_train\\jdym_web\\jdym_front\\src\\main\\resources\\static\\upload\\");

    }
}