jeefast框架： 实现【图片上传】和【显示】功能

jeefast框架： 实现【图片上传】和【显示】功能

首先需要找到如图所示文件配置虚拟目录

打开如图所示的文件在文件中配置虚拟目录

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter{

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/login.html");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers( registry );
    }
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/jeefast/jeefast-system/src/main/resources/static/img/upload/"); //路经
    }
    
}

配置完成后需要找到拦截器文件在拦截器中放开

打开如图所示的文件

在代码中加入如图所示的代码，不对他进行拦截，否则会报错

filterMap.put("/imctemp-rainy/**", "anon");

接下来就是控制器端了：

/**
	 * 文件上传
	 */
	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("/upload")
	@RequiresPermissions("platform:student:upload")
	public R uploadImgs(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
		String contentType = file.getContentType();
		String fileName = System.currentTimeMillis()+file.getOriginalFilename();
		String filePath = "D:/jeefast/jeefast-system/src/main/resources/static/img/upload/";
		if (file.isEmpty()) {
			return R.error("文件为空");
		}
		try {
			uploadFile(file.getBytes(), filePath, fileName);
			return R.ok(fileName);
		} catch (Exception e) {
			return R.error("上传失败");
		}
	}

在上传成功后返回照片的名
接下来是js端：

upload: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));  // msg  ==>  fileName
					if (data.code == 0) {
						vm.student.file="/jeefast/imctemp-rainy/"+data.msg;
						$("#url img").attr("src",vm.student.file);
					} else {
						alert("失败");
					}
				},
				error: function (er) {          //失败，回调函数
					alert(JSON.stringify(this.data));
				}
			});
		},

vm.student.file="/jeefast/imctemp-rainy/"+data.msg;

注意 !!!!

在jeefast框架中上传照片显示的时候一定要在虚拟路径前面加上/jeefast

接下来是html端：

<div class="form-group">
				<div class="col-sm-2 control-label">上传头像</div>
				<div class="col-sm-10">
					<input type="file"  id="file" name="file" rows="3" value="选择图片">
					<input type="button"  value="上传" name="sub" @click="upload">
					<!-- 显示上传图片的内容 -->
					<p id="url"><img :src=student.file width=200></p>
<!--					<p id="url"><img src="" width=200></p>-->
				</div>
			</div>

{ label: '头像',name: 'file',width:75,formatter:function (value, options, row) {
					var img="<img src='"+value+"'style=width:120px;height:65px;"+vm.titleBanner.file+">";
					return img;
				}},

因为图片上传还要将图片的路径发送到数据库中，用于以后我们读取，查看图片，所以我们要在数据库中新建一个file列，储存我们的图片上传的路径；方便我们以后查看。

成功之后就是这样