注意
String filePath = request.getSession().getServletContext().getRealPath("/");
File dir = new File("filePath ");
这段代码的意思：request.getSession().getServletContext() 获取的是Servlet容器对象，相当于tomcat容器了。getRealPath("/") 获取实际路径，“/”指代项目根目录，所以代码返回的是项目在容器中的实际发布运行的根路径;
在本文中
File dir = new File("filePath");
是直接在项目根目录下创建filePath 文件或文件夹
1.步骤：
把前端的图片传到后端controller，然后截取文件的后缀，用uuid + 上传的文件名后缀拼接成新的图片文件名字，然后把图片文件存到项目根目录的/data/image目录下，在把图片路径存到数据库
上代码：
1.前端图片上传代码：
<c:if test="${not empty n.image}">判断是否有图片，有就显示，没有就不显示；
然后通过<input id="file_upload" type="file" name="file" onchange="imgChange(this)"/>中的onchange="imgChange(this)"方法进行表单验证；让用户选择图片后并能显示，并且获取图片的后缀；
<label class="col-sm-2 control-label">图片上传</label>
<div class="col-sm-4">
<input id="file_upload" type="file" name="file" onchange="imgChange(this)"/>
<c:if test="${not empty n.image}">
<img id="uploaded_images" src="${ctx }${n.image}" class="img-rounded" style="width: 150px"/>
</c:if>
<c:if test="${empty n.image}">
<img id="uploaded_images" src="" class="img-rounded" style="width: 150px"/>
</c:if>
<input name="image" type="hidden" value="${n.image}">
</div>
</div>
onchange="imgChange(this)方法的js代码：
//显示需要上传图片的所路途、图片文件验证
// 选择图片显示
function imgChange(obj) {
// 获取点击的文本框
var file = document.getElementById("file_upload");
var fileSize = file.files[0].size;
//input框内的图片路径值obj.value
var fileName = obj.value;
//截取图片文件名的后缀并转为小写
var fileNameSuffix = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
// alert(fileNameSuffix);
//图片文件格式验证
if(fileNameSuffix !="jpg" && fileNameSuffix !="jpeg" && fileNameSuffix !="png"){
//清空input框内的图片路径值obj.value
obj.value = "";
layer.msg("请选择图片格式文件上传(jpg,jpeg,png等)！");
return false;
}
//文件大小验证
if(fileSize/1024>1000){
// file.outerHTML = file.outerHTML;
//清空input框内的图片路径值obj.value
obj.value = "";
layer.msg("图片不能大于1M");
return false;
}
var imgUrl = window.URL.createObjectURL(file.files[0]);
var img = document.getElementById('uploaded_images');
img.setAttribute('src', imgUrl); // 修改img标签src属性值
};
后端保存更新的代码：如果知识图片上传只需关注图片上传的相关代码
* 保存、更新
* @param dto
* @param file
* @param request
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping(value = "/save")
@PreAuthorize("(hasRole('aboutUs.update') and #dto.id != null) or (hasRole('aboutUs.add') and #dto.id == null)")
public String save(AboutUsDTO dto, @RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {
if(verify(dto,file)){
if (dto.getId() == null) {
dto.setCreated(new Date());
dto.setUpdateTime(new Date());
dto.setDeleted(false);
//上传图片
// uploadImg(file,model,request);
//上传图片
String imgPath = saveImgFileAndPath(file,dto,request);
//保存图片地址
if(StringUtils.isNotBlank(imgPath)){
dto.setImage(imgPath);
}
aboutUsService.save(dto);
} else {
AboutUs old = aboutUsService.load(dto.getId());
//set类型
AboutUsTypeDTO aboutUsTypeDTO = new AboutUsTypeDTO();
aboutUsTypeDTO.setId(dto.getAboutUsType().getId());
old.setAboutUsType(aboutUsTypeDTO);
//set更新的时间
old.setUpdateTime(new Date());
//上传图片
String imgPath = saveImgFileAndPath(file,old,request);
//保存图片地址
if(StringUtils.isNotBlank(imgPath)){
old.setImage(imgPath);
}
old.setDescription(dto.getDescription());
aboutUsService.updateAllFields(old);
}
}
return ok();
}
@RequestParam(value = "file", required = false) MultipartFile file中的required = false让file可以没有数据,这样可以避免修改时用户点击上传但并没有选择图片时提交而报错；
String imgPath = saveImgFileAndPath(file,dto,request);这个方法把图片文件保存到@Value("${image.upload.path}") private String path;这个路径中,文件名字是uuid+图片的后缀;
saveImgFileAndPath方法：
* 保存图片文件并且获取图片地址
* @param file
* @param model
* @param request
* @return
*/
public String saveImgFileAndPath(MultipartFile file, AboutUs model, HttpServletRequest request){
if(file != null) {
String fileName = file.getOriginalFilename();
String newFileName = FileNameUtils.getFileName(fileName);
//保存图片文件
String imgPath = upload(newFileName, request, file);
if(StringUtils.isNotBlank(imgPath)){
String imgName = imgPath.substring(imgPath.lastIndexOf("/"));
imgPath = path.substring(path.lastIndexOf("/"));
return imgPath+imgName;
}
}
return null;
}
//保存图片文件
String imgPath = upload(newFileName, request, file);
方法的代码：
* @author huZhiQiang
* 把图片文件保存到${image.upload.path}目录下
* request.getSession().getServletContext().getRealPath() 得到站点的绝对地址
* @param newFileName
* @param request
* @param file
* @return
*/
public String upload(String newFileName, HttpServletRequest request,MultipartFile file){
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
logger.error("contentType", contentType);
logger.error("filename1:" + fileName);
logger.error("filePath1:" + path);
// String newFileName = "";
if(StringUtils.isNotBlank(fileName)){
try {
/*FileUtils.upload(file.getBytes(), path, newFileName);*/
String imgPath = imageService.saveImage(newFileName,file.getBytes());//保存图片文件
// 拼接图片url
// String imgHost = MyWebUtils.getCtx();
// String imgUploadPath = path;
// String imgName = newFileName;
// String imgPath = imgHost + imgUploadPath + "/" + imgName;
logger.error("拼接好的图片上传路径为：" + imgPath);
return imgPath;
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
imageService.saveImage(newFileName,file.getBytes())的代码：
* 上传图片并返回完整访问路径
*
* @return
*/
public String saveImage(String fileName, byte[] data) {
if (uploadType == UPLOAD_TYPE_LOCAL) {
if (StringUtils.isBlank(fileName) || !fileName.contains(".")) { // 为空或没有后缀
fileName = UUID.randomUUID().toString();
} else {
fileName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));
}
File dir = new File(imagePath);
if (!dir.exists()) {
dir.mkdirs();
}
if (!dir.exists()) {
throw new BizException("无法创建图片上传路径" + imagePath);
}
try {
FileUtils.writeByteArrayToFile(new File(dir, fileName), data);
return MyWebUtils.getCtx() + "/image/" + fileName;
} catch (IOException e) {
throw new BizException("保存图片失败:" + e.getMessage(), e);
}
} else if (uploadType == UPLOAD_TYPE_CDN) {
return qiniuService.upload(data, fileName);
} else {
throw new BizException("图片上传配置错误");
}
}
搞定！！！
扫一扫
7509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
