由于最近开发的项目需要有上传图片的功能,并且能够让上传的图片能够在网页上预览出来。所以写下此篇文章,记录一下学习到的知识。
1,前端
前端项目是采用angularjs框架搭建的。图片上传功能在前端的代码分布在两个部分,一部分是图片上传页面的表单代码,一部分是在对应的controller中的代码。下面对这两方面代码进行展示。
(1)页面代码
<form class="form-horizontal" role="form" id="editForm"
name="editForm" ng-model="editForm" novalidate>
<div class="form-group">
<label class="col-xs-3 col-sm-3 control-label no-padding-right">
<span class="red">*</span>菜单ID
</label>
<div class="col-xs-6 col-sm-6">
<input type="text" ng-model="dataItem.menuId" class="col-xs-9 col-sm-9" readonly />
</div>
<div class="space-4"></div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 control-label no-padding-right">
<span class="red">*</span>图片预览
</label>
<div class="col-xs-6 col-sm-6">
<div class="col col-sm-4 text-left">
<img id="imgadd" width="300px" ng-src="{{contextPath}}/showImg?path={{dataItem.imgAddress}}"
style="width:200px; height: 200px; max-width:500px;" onerror ="this.src='modules/moi/views/default404.png'"/>
</div>
</div>
<div class="space-4"></div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 control-label no-padding-right">
<span class="red">*</span>菜单图标
</label>
<div class="col-xs-6 col-sm-6">
<input type="text" size="20" name="upfile" id="upfile"
class="col-sm-8" ng-value="photofiles.value"/>
<button class="btn btn-warning btn-sm" onclick="file.click()"
class="col-sm-1">选择</button>
<input id="file" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" name="photofiles"
ng-model="dataItem.imgAddress" style="display: none;"
onchange="upfile.value=this.value" />
<button class="btn btn-info btn-sm" ng-click="lookImg()"
class="col-sm-1">预览</button>
</div>
<div class="space-4"></div>
</div>
</form>
(2)controller代码
//对修改后的菜单进行保存
$scope.saveInfo=function(){
var menuId=$scope.dataItem.menuId;
var imgAddress=$scope.dataItem.imgAddress;
var imgFlag="1";
var reg = /^[0-9]+.?[0-9]*$/;
if(menuName == null || menuName == ""){
$alert.info({
'message' : '菜单名称不能为空!'
});
}else if(showOrder!=''&&!reg.test(showOrder)){
$alert.info({
'message' : '检查顺序号是否为数字!'
});
} else{
var file = document.getElementById("file").files;
// 使用FormData对象类型向后台传文件
var fd = new FormData(document.getElementById("editForm"));
if(file.length==0){
imgFlag="0";
}else{
imgFlag="1";
}
$http({
method:'post',
url:SpringBootWebApp.contextPath +"alterMenu",
data:fd,
contentType : 'application/json',
headers : {
'Content-Type' : undefined
},
params:{
"menuId":menuId,
"imgAddress":imgAddress,
"imgFlag":imgFlag
}
}).success(function(data){
if(data.Code=="0"){
$alert.tip(data.Msg);
}else{
$alert.tip_error(data.Msg);
}
//设置返回函数
$scope.goToList();
}).error(function(data){
alert(data.error);
});
}
}
//返回菜单列表方法
$scope.goToList = function() {
$location.path('/bankAdmin/hos_menu/list');
}
//预览图片的方法
$scope.lookImg=function(){
var result=document.getElementById("imgadd");
var file=document.getElementById("file").files;
if(file.length==0){
$alert.error({
message:"请选择一张图片!"
});
return;
}
if(typeof FileReader==='undefined'){
result.innerHTML="抱歉,你的浏览器不支持 FileReader";
file.setAttribute('disabled','disabled');
}else{
var reader=new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function(e){
result.src=reader.result;
}
}
}
2,后端代码
(1)controller层
@RequestMapping(value="/alterMenu",method = RequestMethod.POST)
public Map<String,String> altermenu(@RequestParam String menuId,@RequestParam(required = false,defaultValue = "") String imgAddress,@RequestParam(required = false,defaultValue = "") String imgFlag, @RequestParam(name = "photofiles",required = false,defaultValue = "")MultipartFile file){
return service.altermenu(menuName,menuId,showOrder,imgAddress,imgFlag,file);
}
(2)service层
public Map<String,String> altermenu(String menuId,String imgAddress,String imgFlag,MultipartFile file){
//查找对应菜单id的菜单
HosMenu hosMenu = hosMenuRepository.findByMenuId(menuId);
//设置图片名称
String finename =menuId+".jpg";
//判断图片是否有路径传入
if("1".equals(imgFlag)){
//对图片进行保存
createImgpath(hosMenu,finename,file);
}else {
//无新图上传则直接保存先前图片地址
hosMenu.setImgAddress(imgAddress);
}
Map<String,String> resultMap = new HashMap<>();
resultMap.put("Code","0");
resultMap.put("Msg","修改成功!");
//保存
hosMenuRepository.save(hosMenu);
return resultMap;
}
//创建上传的图片路径
public void createImgpath(HosMenu hosMenu,String fileName,MultipartFile file ){
//根据hospitalmenu/菜单id 来建立图片路径
String relativeFilePath="hospitalmenu/"+hosMenu.getMenuId()+"/";
hosMenu.setImgAddress(relativeFilePath+fileName);
//保存访问的路径
String saveFilePath = SystemParameterService.getInstance().getParameterValue("path-photofiles") + relativeFilePath;
File fileDir = new File(saveFilePath);
if (!fileDir.exists()) {
// 构建层级目录
fileDir.mkdirs();
}
// 保存图片
String filePath = saveFilePath + fileName;
saveImg(filePath,file);
}
//图片资源保存
public void saveImg(String filePath, MultipartFile file){
// 保存图片
try {
FileOutputStream out = new FileOutputStream(filePath);
BufferedInputStream is = new BufferedInputStream(file.getInputStream());
int count = 0;
byte[] buffer = new byte[1024];
// 一个一个字节的读取并写入
while ((count = is.read(buffer)) != (-1)) {
out.write(buffer, 0, count);
}
out.flush();
out.close();
is.close();
} catch (Exception e) {
e.printStackTrace();
}
}
(3)效果页面展示