jeefast使用Mybatis进行图片上传_mybatis上传图片-CSDN博客

在jeefast中找到配置虚拟目录的地方
在这里插入图片描述看一下是否继承了WebMvcConfigurerAdapter 接口，如果继承的话就重写配置虚拟目录的方法

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

/imctemp-rainy/**映射路径，意思就是==自己电脑放图片的地方，可以随便定义例如：/a/**
E:/picture/是自己电脑存放图片的任意路径
然后放开拦截器
在这里插入图片描述

//放开拦截器的权限
        filterMap.put("/imctemp-rainy/**", "anon");

如果不放开，就会报错
在这里插入图片描述
e
Entity层定义属性，添加set和get方法

/**
     * 图片
     */
	private String pic;
		public String getPic() {
		return pic;
	}

	public void setPic(String pic) {
		this.pic = pic;
	}

数据库
添加字段
在这里插入图片描述

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:/picture";
		//JSONObject 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:/picture/"+filePath);
		if (file.exists()) {
			if (file.delete()) {
				resultInfo = "1-删除成功";
			}else {
				resultInfo = "0-删除失败";
			}
		}else {
			resultInfo = "文件不存在！";
		}
		return R.ok().put("resultInfo", resultInfo);
	}

js页面
vm.student.pic需要在vue里面定义
在这里插入图片描述
显示图片的代码，记住标点不能错，标点作用意思就是分割不同类型的的代码，方便调用

	{ label: '学生图片', name: 'pic', width: 75, formatter:function (value,row,index) {
				var img = "<img src='"+value+"'style=width:80px;height:50px;"+vm.student.pic+">";
				return img;
				}},

$(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.pic = "/jeefast/imctemp-rainy/"+ data.img.fileName;
					$("#url img").attr("src",pic);
					$("#picture").val(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 == "no.jpg"){
			//alert(1);
		}else{
			vm.student.pic = "/jeefast/imctemp-rainy/no.jpg";
			$.post(baseURL + 'platform/student/deleteImages',{filePath:str_img},function(data){
				// alert(JSON.stringify(data));
				//这里我们取消上传成功之后去给换成一个暂无图片的一个图
				$("#url img").attr("src","/jeefast/imctemp-rainy/no.jpg");
				$("#picture").val("/jeefast/imctemp-rainy/no.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.pic" width=200></p>
                    <input type="text" class="form-control" id="picture" v-model="student.pic" placeholder="学生照片"/>
                    <input type="button" id="button" value="上传" >
                    <input type="button" id="t_button" value="取消上传" >
                </div>
            </div>