畢業設計_後臺_圖片上傳
阿新 • • 發佈:2019-01-29
環境配置
使用kindeditor元件實現
1.新增依賴
加入commons-fileupload
2.在SpirngMVC配置檔案中編寫CommonsMultipartResolver
上傳元件js的實現
kindeditor元件初始化
頁面載入時初始化圖片上傳元件
// 初始化圖片上傳元件
initPicUpload : function(data){
$(".picFileUpload").each(function(i,e){
var _ele = $(e);
_ele.siblings("div.pics" ).remove();
_ele.after('\
<div class="pics">\
<ul></ul>\
</div>');
// 回顯圖片
if(data && data.pics){
var imgs = data.pics.split(",");
for(var i in imgs){
if ($.trim(imgs[i]).length > 0){
_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
}
}
}
$(e).click(function (){
var form = $(this).parentsUntil("form").parent("form");
KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
var editor = this;
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var imgArray = [];
KindEditor.each(urlList, function(i, data) {
imgArray.push(data.url);
form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
});
form.find("[name=image]").val(imgArray.join(","));
editor.hideDialog();
}
});
});
});
});
},
編寫控制層
package com.jManager.controller;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.RandomUtils;
import org.apache.commons.lang3.StringUtils;
import org.joda.time.DateTime;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jManager.common.pojo.PicUploadResult;
/**
* 圖片上傳
*/
@Controller
@RequestMapping("/pic")
public class PicUploadController {
private static final Logger LOGGER = LoggerFactory.getLogger(PicUploadController.class);
private static final ObjectMapper mapper = new ObjectMapper();
// 允許上傳的格式
private static final String[] IMAGE_TYPE = new String[] { ".bmp", ".jpg", ".jpeg", ".gif", ".png" };
@RequestMapping(value = "/upload", method = RequestMethod.POST,produces=MediaType.TEXT_PLAIN_VALUE)
@ResponseBody
public String upload(@RequestParam("uploadFile") MultipartFile uploadFile , HttpServletResponse response) throws Exception {
// 校驗圖片格式
boolean isLegal = false;
for (String type : IMAGE_TYPE) {
if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(), type)) {
isLegal = true;
break;
}
}
// 封裝Result物件,並且將檔案的byte陣列放置到result物件中
PicUploadResult fileUploadResult = new PicUploadResult();
// 狀態
fileUploadResult.setError(isLegal ? 0 : 1);
// 檔案新路徑
String filePath = getFilePath(uploadFile.getOriginalFilename());
if (LOGGER.isDebugEnabled()) {
LOGGER.debug("Pic file upload .[{}] to [{}] .", uploadFile.getOriginalFilename(), filePath);
}
String picUrl = StringUtils.replace(StringUtils.substringAfter(filePath,"D:\\jShop-upload"), "\\", "/");
fileUploadResult.setUrl("http://image.jShop.com" + picUrl);
File newFile = new File(filePath);
// 寫檔案到磁碟
uploadFile.transferTo(newFile);
// 校驗圖片是否合法
isLegal = false;
try {
BufferedImage image = ImageIO.read(newFile);
if (image != null) {
fileUploadResult.setWidth(image.getWidth() + "");
fileUploadResult.setHeight(image.getHeight() + "");
isLegal = true;
}
} catch (IOException e) {
}
// 狀態
fileUploadResult.setError(isLegal ? 0 : 1);
if (!isLegal) {
// 不合法,將磁碟上的檔案刪除
newFile.delete();
}
response.setContentType(MediaType.TEXT_HTML_VALUE);
return mapper.writeValueAsString(fileUploadResult);
}
private String getFilePath(String sourceFileName) {
String baseFolder = "D:\\jShop-upload" + File.separator + "images";
Date nowDate = new Date();
// yyyy/MM/dd
String fileFolder = baseFolder+ File.separator + new DateTime(nowDate).toString("yyyy") + File.separator + new DateTime(nowDate).toString("MM") + File.separator
+ new DateTime(nowDate).toString("dd");
File file = new File(fileFolder);
if (!file.isDirectory()) {
// 如果目錄不存在,則建立目錄
file.mkdirs();
}
// 生成新的檔名
String fileName = new DateTime(nowDate).toString("yyyyMMddhhmmssSSSS") + RandomUtils.nextInt(100, 9999) + "." + StringUtils.substringAfterLast(sourceFileName, ".");
return fileFolder + File.separator + fileName;
}
}
返回的結果:
package com.jManager.common.pojo;
public class PicUploadResult {
private Integer error;
private String url;
private String width;
private String height;
public Integer getError() {
return error;
}
public void setError(Integer error) {
this.error = error;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getWidth() {
return width;
}
public void setWidth(String width) {
this.width = width;
}
public String getHeight() {
return height;
}
public void setHeight(String height) {
this.height = height;
}
}
解決圖片回顯的問題
一般使用代理伺服器處理靜態資源
需要配置nginx
配置host