SpringBoot圖片上傳(三)——呼叫檔案上傳專案的方法(同時啟動兩個專案)
阿新 • • 發佈：2018-11-02
簡單說明：圖片上傳有一個專門的工程A，提供了圖片的上傳和下載預覽，工程B涉及到圖片上傳以及回顯，都是呼叫的工程A的方法，言外之意就是要同時啟動兩個專案。
程式碼：
//工程B的html程式碼 <div class="col-md-12">
<label class="control-label flex" style="margin-top: 10px;">
上傳圖示<span class="star align-items">*</span>
</label>
<input type="file" name="file" value="上傳圖示" id="fileupload" th:onchange="|fileUpload()|"style="display:none"/>
<img src="/oh-manager/assets-new/apps/img/shangchuan.png" alt="" th:onclick="|uploadfile()|" id="imageId" style="margin-top: 10px;"/>
<input type="hidden" id="serviceIcon" name="serviceIcon" class="form-control"/>
</div>
//工程B的js程式碼
<script type="text/javascript">
function uploadfile(){
$("#fileupload").trigger("click");
}
//檔案上傳 function fileUpload(file){
var myform = new FormData();
myform.append('file', $("#fileupload")[0].files[0]);
var max_size = 512;// 300k
var tmpFile = $("#fileupload").val();
var imgtype = tmpFile.toLowerCase().split('.');
if ((imgtype[1]) != "jpg") {
layer.msg("圖片只支援jpg格式");
tmpFile.value = "";
return false;
} else {
$.ajax({
type:"POST",
url: rootPath + "/serv/service/updatefile",
data:myform,
cache: false,
contentType: false,
processData: false,
dataType: "json",//返回的資料格式
async: false,
success: function (data) {
if(data==="1" ){
layer.msg("上傳失敗，圖片記憶體過大");
}else if(data=="2"){
layer.msg("上傳失敗，圖片記憶體過大");
}else{
var path="/oh-manager/"+data;
//IP是檔案上傳專案A在伺服器的地址 upload是controller的註解 showPic是方法
var imgPlanIcon ='http://10.131.103.220:8590/upload/showPic?ppath=' + data;
$('#imageId').attr('src', imgPlanIcon);
$('#serviceIcon').val(data);
}
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
return false;
}
</script>
//工程B的後臺java程式碼 @RequestMapping(value="/updatefile")
public @ResponseBody String updatefile(@RequestParam("file") MultipartFile file,
HttpServletRequest request) {
// 建立httpclient物件
CloseableHttpClient httpClient = HttpClients.createDefault();
// 建立post方式請求物件 請求地址是工程A的檔案上傳方法upimgs
HttpPost httpPost = new HttpPost("http://10.131.103.220:8590/upload/upimgs");
String fileName = file.getOriginalFilename();
String filePath = "D:/image/temp";
try {
MultipartEntityBuilder builder = MultipartEntityBuilder.create();
builder.addBinaryBody("file", file.getInputStream(), ContentType.MULTIPART_FORM_DATA, fileName);// 檔案流
builder.addTextBody("filename", fileName);// 類似瀏覽器表單提交，對應input的name和value
HttpEntity entity = builder.build();
httpPost.setEntity(entity);
CloseableHttpResponse response = httpClient.execute(httpPost);
// 獲取響應物件
HttpEntity resEntity = response.getEntity();
if (resEntity != null) {
// 列印響應內容
String aa=EntityUtils.toString(resEntity, Charset.forName("UTF-8"));
JSONObject data2 = JSONObject.fromObject(aa);
fileName=data2.getString("title");
}
// 銷燬
EntityUtils.consume(resEntity);
File targetFile = new File(filePath);
if(!targetFile.exists()){
targetFile.mkdirs();
}
File fileRoute = new File(filePath+"/"+fileName);
BufferedImage sourceImg =ImageIO.read(fileRoute);
Long size = file.getSize() / 1024; // 圖片大小
int wid=sourceImg.getWidth(); // 源圖寬度
int hei=sourceImg.getHeight(); // 源圖高度
if(size>512){
fileName="1";
}
if(wid>60 || hei>60){
fileName="2";
}
} catch (Exception e) {
// TODO: handle exception
}
//返回json
return fileName;//返回js的成功回撥函式
}
//工程A的上傳方法upload/upimgs @RequestMapping(path="/upimgs", method=RequestMethod.POST,produces = "application/json;charset=utf-8")
@ResponseBody
//@CrossOrigin("*") //可跨域訪問
// public String uploadImgs(HttpServletRequest request) throws IllegalStateException, IOException {
public FileSaveResult uploadImgs(HttpServletRequest request) throws IllegalStateException, IOException {
// String reResult="";
FileSaveResult reResult = null;
try {
reResult = FileSaveUtil.uploadImg(request);
} catch (IllegalStateException e) {
logger.error(e,e);
e.printStackTrace();
} catch (IOException e) {
logger.error(e,e);
e.printStackTrace();
}
return reResult;
}
//工程A的下載回顯方法upload/showPic
@RequestMapping(path="/showPic", method=RequestMethod.GET,produces = "application/json;charset=utf-8") public void showPic(String ppath, HttpServletResponse response) { FileInputStream hFile = null; if (!ppath.equals("") && !ppath.equals("/")) { try { // 去除路徑中的回溯 ../ ppath = ppath.replace("../", ""); // 拼接圖片資源路徑 String prePath = FileuploadEnv.getFileImgPath(); String imgFileUrl = prePath + "/" + ppath; System.out.println("imgFileUrl 完整路徑：" + imgFileUrl); // 開啟檔案 File file = new File(imgFileUrl); // 驗證開啟的檔案是否是在 prePath 目錄下，若不是，不做任何處理 String openedFileAbsolutPath = file.getAbsolutePath(); logger.info("開啟的檔案絕對路徑：" + openedFileAbsolutPath); if (!openedFileAbsolutPath.contains(openedFileAbsolutPath)) { logger.info("訪問的圖片資源不在指定目錄之下，不可返回。開啟的檔案絕對地址：" + openedFileAbsolutPath); return; } else { logger.info("訪問的圖片資源在指定目錄之下，可以返回。"); } // 圖片副檔名判定 String suffix = FileType.getSuffixByFilename(openedFileAbsolutPath); boolean judgeResult = FileExtensionUtil.fileExtensionJudge(suffix); if (!judgeResult) { logger.info("訪問的圖片資源格式不正確，不可返回。圖片格式：" + suffix + "， 格式限制：" + FileExtensionUtil.IMG_SUFFIX); return; } // hFile = new FileInputStream(imgFileUrl); // 以byte流的方式開啟檔案 d:\1.gif hFile = new FileInputStream(file); // 以byte流的方式開啟檔案 d:\1.gif int i = hFile.available(); // 得到檔案大小 byte data[] = new byte[i]; hFile.read(data); // 讀資料 response.setContentType("image/*"); // 設定返回的檔案型別 OutputStream toClient = response.getOutputStream(); // 得到向客戶端輸出二進位制資料的物件 toClient.write(data); // 輸出資料 toClient.flush(); toClient.close(); hFile.close(); } catch (Exception ex) { ex.printStackTrace(); } finally { try { if (hFile != null) { hFile.close(); } } catch (Exception e) { e.printStackTrace(); } } } else { return; } }
犯的錯誤總結：請求工程A的upimgs或者showPic方法的時候，地址一定要加上 http://Ip地址/要訪問的Controller/要訪問的方法
即使工程A是在本地，也需要地址也是http://本機IP/要訪問的Controller/要訪問的方法(相對路徑) 一定不要加上什麼E盤工作空間工程名稱，這樣的話就訪問不到，直接就是ip地址+controller+方法，加E盤/·····這是絕對路徑
因為是工程B呼叫工程A的方法，所以要同時執行兩個專案。
http://10.131.103.220:8590/upload/showPic或者upimgs upload是工程A的@[email protected]("/upload")註解裡的值
進入頁面需要回顯圖片的時候，就把資料庫中查到的圖片名字傳遞到前臺頁面，在前臺中加入js：
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
//接收前臺傳遞過來的圖片名字
var serviceIcon = [[${serviceIcon}]];
if (CommnUtil.notNull(serviceIcon)) {
var imgname = serviceIcon.split("/");
var imgPlanIcon = 'http://10.131.103.220:8590/upload/showPic?ppath=icon/' + imgname[imgname.length - 1];
$("#imageId").attr('src', imgPlanIcon);
$('#serviceIcon').val(imgname[imgname.length - 1]);
}
</script>