StringBoot+jeefast 的图片上传

jeefast 的图片上传

jeefast这个框架当中找到配置虚拟目录的地方
查看并继承了WebMvcConfigurerAdapter 这个接口 继承后重写我们配置虚拟目录的方法

 @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:E:\\IDEA\\file\\");
    }

/imctemp-rainy/** 前面的是在前端方面用的
file:E:\IDEA\file\ 是本机路径上传完图片 保存上传图片的路径

配置完成之后我们需要进行放开拦截器的位置

Controller

//图片上传

    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();
    }
    //处理文件上传
    @Log("文件上传")
    @RequestMapping(value = "upload", method = RequestMethod.POST)
    public R uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws JSONException {
        String contentType = file.getContentType();
        //System.out.print(contentType);
        String fileName = System.currentTimeMillis()+file.getOriginalFilename();
        String filePath = "E:\\IDEA\\file\\";
        //JSONObjectf jo = new JSONObject();//实例化json数据
        Map<String,String> jo = new HashMap<>();
        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", filePath+"/"+fileName);
        } catch (Exception e) {
            // TODO: handle exception

        }
        //返回json
        return R.ok().put("img", jo);

    }
    @RequestMapping("deleteImages")
    public R deleteImages(HttpServletRequest request) {
        String resultInfo = null;
        String filePath = request.getParameter("filePath");
        //这里是可以在控制器分割字符的一个方法
        //int lastIndexOf = filePath.lastIndexOf("/");
        //String sb = filePath.substring(lastIndexOf+1,filePath.length());
        //由于我们只获取了图片的名称并没有获取到所有的地址，，所以我们需要去给他进行添加存放图片的地址
        File file = new File("E:\\IDEA\\file"+filePath);
        if (file.exists()) {
            if (file.delete()) {
                resultInfo = "1-删除成功";
            }else {
                resultInfo = "0-删除失败";
            }
        }else {
            resultInfo = "文件不存在！";
        }
        return R.ok().put("resultInfo", resultInfo);
    }

JSP

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

                    // alert($("#url img").attr("src"));
                } else {
                    alert("失败");
                }

            },
            error: function (er) {          //失败，回调函数
                alert("上传失败");
            }
        });
    });

    $("#t_button").click(function () {
        //这里分割字符串 /imctemp-rainy/157352875235607c10257539a5f4dcdaab233ca2832a5.jpg
        //需要用/分割字符先后获取最后一段字符串去上传到后台
        // alert($("#url img").attr("src"));
        var img = $("#url img").attr("src");
        var str = img.split("/");
        var str_img=str[str.length-1];
        //alert(str_img);
        if(str_img == "1.jpg"){
            //alert(1);
        }else{
            vm.pic = null;
            $.post(baseURL + 'platform/student/deleteImages',{filePath:str_img},function(data){
                // alert(JSON.stringify(data));
                //这里我们取消上传成功之后去给换成一个暂无图片的一个图
                $("#url img").attr("src","/jeefast/imctemp-rainy/1.jpg");

            });
        }
    });
});

HTML

     <div class="form-group">
                <div class="col-sm-2 control-label">学生照片</div>
                <div class="col-sm-10">
                    <input type="file" name="file" id="file" class="form-control">
                    <p id="url" height="500px"><img :src="student.file" width=200></p>

                    <input type="button" id="button" value="上传" >
                    <input type="button" id="t_button" value="取消上传" >
                </div>
            </div>

我们在访问图片的时候一定要在它的本机地址后面加上它所配置的地址，比如jeefast的框架需要这样写

127.0.0.1:8080/jeefast/imctemp-rainy/图片地址

图片地址即