springboot+vue图片上传显示

1.启动类

 @Override//图片上传的
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/JavaProject/SPring/SpringBootVue/src/main/resources/static/uploadimage/");
    }

2.添加页面
html

<div class="form-group">
            选择图片：<input type="file" name="file" id="file" /><p id="url"><img :src="newstype.nt_filename" width=200></p>
            <input type="button"  id="button" value="上传" ><input type="button" id="quxiao" value="取消">
</div>

jq

 $("#button").click(function () { //上传图片
            var form = new FormData();
            form.append("file", document.getElementById("file").files[0]);
            $.ajax({
                url: "/newstype/upload",        //后台url
                data: form,
                cache: false,
                async: false,
                type: "POST",                   //类型，POST或者GET
                dataType: 'json',              //数据返回类型，可以是xml、json等
                processData: false,
                contentType: false,
                success: function (data) {
                    alert(data);
                    vm.newstype.nt_filename=data.xfilename;
                    //成功，回调函数
                    if (data) {
                        var pic="/imctemp-rainy/"+data.fileName;
                        alert(pic);
                        $("#url img").attr("src",pic);
                        // alert(JSON.stringify(data));
                    } else {
                        alert("失败");
                    }
                },
                error: function (er) {          //失败，回调函数
                    alert(JSON.stringify(data));
                }
            });
        })
    })

controller

@ResponseBody //返回json数据
    @RequestMapping(value = "upload", method = RequestMethod.POST)
    public JSONObject uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
        String contentType = file.getContentType();
        String fileName = System.currentTimeMillis()+file.getOriginalFilename();
        String filePath = "D:/JavaProject/SPring/SpringBootVue/src/main/resources/static/uploadimage";
        JSONObject jo = new JSONObject();//实例化json数据
        if (file.isEmpty()) {
            jo.put("success", 0);
            jo.put("fileName", "");
        }
        try {
            uploadFile(file.getBytes(), filePath, fileName);
            jo.put("success", 1);
            jo.put("fileName", fileName);
            jo.put("xfilename", "/imctemp-rainy/"+fileName);
        } catch (Exception e) {
            // TODO: handle exception
        }
        //返回json
        return jo;
    }

 public static void uploadFile(byte[] file, String filePath, String fileName)throws Exception{
        File targetFile = new File(filePath);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        FileOutputStream out = new FileOutputStream(filePath+"/"+fileName);
        out.write(file);
        out.flush();
        out.close();
    }

3.显示页面
数据库存入样式：

<td><img :src="nt.nt_filename" id="img" alt="" width="50"></td>