Java後端SSM框架圖片上傳功能
| 這個作業屬於哪個課程 | 2021春軟體工程實踐|S班（福州大學） |
|---|---|
| 這個作業要求在哪裡 | 作業具體要求 |
| 這個作業的目標 | 對軟體工程實踐這門課程進行回顧、總結；對在課程期間學習到的技術進行總結 |
| 其他參考文獻 | 《構建之法》、CSDN、部落格園、菜鳥教程 |
1.技術概述
1.1描述這個技術是做什麼的/什麼情況下會使用到這個技術？
該技術可以實現上傳圖片到伺服器上，並且把地址存在資料庫中，前端可以通過地址呼叫圖片。
1.2學習該技術的原因？
由於使用者在驗證身份、發帖、發表組局、更換頭像的時候都要用到圖片上傳的功能，可以說“上傳圖片”幾乎覆蓋了我們所有的版塊。因此，我覺得很有必要學習並且掌握該技術。其實團隊中負責該部分的另有其人，為了更好地進步我也學習了一下，並在此進行總結。
2.技術詳述
2.1maven工程匯入相關依賴（或加入兩個對應jar包即可）
<!--上傳檔案所需依賴--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.2</version> </dependency>
2.2到spring-mvc新增相關上傳配置
<!--檔案上傳配置--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 上傳檔案大小上限，單位為位元組（10MB） --> <property name="maxUploadSize"> <value>10485760</value> </property> <!-- 請求的編碼格式，必須和jSP的pageEncoding屬性一致，以便正確讀取表單的內容，預設為ISO-8859-1 --> <property name="defaultEncoding"> <value>UTF-8</value> </property> </bean>
2.3在前端寫一個上傳樣式
表單路徑設定為相應訪問路徑，並帶上?sid=${session.sid}"，方便把檔名查到對應的資料上。
<div>
<p>(點選頭像開始選擇頭像)</p><br>
<p >
<img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" src="${imgUser.data.userProfilePhoto}">
</p>
<br>
<form id="test">
<input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/>
</form>
<button data-role="none" onclick="testUpload();" class="btn btn-info">儲存頭像</button>
</div>
2.4實現回顯
function imgChange(e) {
console.info(e.target.files[0]);//圖片檔案
console.log(e.target.value);
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
$('.user-header').attr('src',this.result);
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
$('.user-header').click(function () {
$("#file").click();
});
2.5將圖片資訊傳送到後臺
function testUpload(){
var form = new FormData();
form.append('id',${imgUser.data.userId});
form.append('file',$("#file")[0].files[0]);
$.ajax({
url:"/user/img",
data:form,
type:"POST",
processData:false,
contentType:false,
success : function(result){
if(result.status==200){
alert("成功")
}else{
alert(result.msg);
}
},
});
}
2.6後臺controller層完善對應處理
@RequestMapping("/user/img")
@ResponseBody
public Result test(MultipartFile file,HttpServletRequest request,long id) throws IOException{
String path = request.getSession().getServletContext().getRealPath("/images");
//System.out.println("路徑："+path);
String fileName = file.getOriginalFilename();
//System.out.println("檔名稱"+fileName);
File dir = new File(path, fileName);
//System.out.println("判斷目錄是否存在："+dir.exists());
if(!dir.exists()){
dir.mkdirs();
}
// MultipartFile自帶的解析方法
file.transferTo(dir);
String imageurl = "http://localhost:8080/images/"+fileName;
User user = new User();
user .setUserId(id);
user .setUserProfilePhoto(imageurl);
Result result = getUserInfoService.updateUser(user);
return result;
}
3.技術使用中遇到的問題和解決過程
3.1無法訪問介面：檢視是否使用表單形式訪問：method="post" enctype="multipart/form-data"，同時檢視上傳的名字是否與介面相對應。
3.2無法儲存：檢視是否已進行伺服器的設定，在CSDN、簡書搜尋關於intellij idea的tomcat裡設定訪問路徑。
4.總結
有人說為什麼不考慮在進行圖片的上傳的時候考慮過直接上傳二進位制到資料庫用blob進行儲存。BLOB儲存圖片檔案二進位制數會導致對資料庫的讀/寫的速度永遠都趕不上檔案系統處理的速度；而且資料庫備份變的巨大，越來越耗時間；對檔案的訪問需要穿越應用層和資料庫層，遂改為儲存圖片地址的方式進行上傳。
5.參考文獻、參考部落格（標題、作者、連結）
CCblibo的——ssm框架---實現簡單的檔案的上傳：https://blog.csdn.net/qq_43266465/article/details/103146056
ArthurDream——SSM框架實現檔案的上傳與回顯（圖片為例）：https://www.jianshu.com/p/eab968b92839
樑小濤——MySQL+SSM+Ajax上傳圖片問題：https://www.jb51.net/article/108597.htm
秦瑞It行程實錄——BLOB儲存圖片檔案二進位制資料是非對錯：https://www.cnblogs.com/ruiy/p/4001100.html
diaodiao256——基於ssm的上傳圖片：https://blog.csdn.net/tigerhu256/article/details/78119963?locationNum=4&fps=1