前后端實現上傳圖片功能（JAVA代碼）
1.前端大概
請求頭必須為AJAX請求頭： 'X-Requested-With': 'XMLHttpRequest'
一般是指網頁中存在的Content-Type，用於定義網絡文件的類型和網頁的編碼，決定文件接收方將以什么形式： application/x-www-form-urlencoded：數據被編碼為名稱/值對。這是標准的編碼格式。
multipart/form-data： 數據被編碼為一條消息，頁上的每個控件對應消息中的一個部分。
2.設置請求頭格式
baseURL: baseUrl,
timeout: 60000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'multipart/form-data'
},
})
3.AJAX請求代碼：
// this.$refs.upload.submit();
if(this.imageFileName.length>5){
this.$message('圖片不能超過5張');
return false
}
let data = {};
let files = this.imageFileName;
console.log(files)
let param = new FormData(); //創建form對象
if(files!=''){
files.forEach((n,i)=>{
console.log(n)
n['isFormField']=true;
param.append('broadcastName',n.raw)
// param.append('isFormField',true)
})
param.append('strusercode',this.pubFuc.user.strusercode)
; //單個圖片 ，多個用循環 append 添加
console.log(param)
}else{
this.$message.error("圖片不對");
return false
}
this.$sendFormData.post('broadcast/uploadPicture',param)
.then(data=>{
if(data.data.result==1000){
this.imageFileName=[];
}else{
this.$message({
type:"error",
message:data.data.msg
})
}
})
},
4.JAVA后台代碼（比較長：原因是一個方法，為方便大家看）
@GET
@POST
@Path("/uploadPicture")
@Produces("application/json;charset=UTF-8")
@Consumes("multipart/form-data")
public String uploadPicture(@Context HttpServletRequest request, @Context HttpServletResponse response){
JSONObject resultJson = new JSONObject();
String imgName=null;//給圖片定義名稱
String imgPath = null;//給圖片指定的上傳路徑
String strusercode=null;
List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
try{
//創建服務器路徑存儲圖片
imgPath=THESERVERURL+"broadcast\\";
//創建文件夾
File file = new File(imgPath);
if (!file.exists()){// 創建文件夾
file.mkdirs();
}else{
//刪除文件中的所有圖片
String name[]=file.list();
for (int i=0; i<name.length; i++){
File f=new File(imgPath,name[i]);//此時就可得到文件夾中的文件
f.delete();//刪除文件
}
}
DiskFileItemFactory factory = new DiskFileItemFactory(); // 設置工廠
factory.setRepository(new File(imgPath)); // 設置文件存儲位置
factory.setSizeThreshold(1024 * 1024); // 設置大小，如果文件小於設置大小的話，放入內存中，如果大於的話則放入磁盤中,單位是byte
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("utf-8"); // 這里就是中文文件名處理的代碼，其實只有一行
List<FileItem> listform = upload.parseRequest(request);
if (listform != null && !listform.isEmpty()){
int sort=0;
for (FileItem fileItem : listform){
sort++;
Map<String,Object> map =new HashMap<String,Object>();
// 判斷表單數據是否為普通字段 不是則為圖片字段
if (fileItem.isFormField()){
String fieldName = fileItem.getFieldName();// 獲取表單字段名稱
String value = fileItem.getString("utf-8");// 獲取表單字段值
strusercode=value;//獲取用戶編碼
}else{
// 上傳圖片的保存
String value = fileItem.getName();//值
//String fieldName = fileItem.getFieldName();// 獲取表單字段名稱
if(value!=null && !"".equals(value)){
// 保存的圖片名稱 currentTimeMillis時間搓
imgName = System.currentTimeMillis()+ fileItem.getName().substring(fileItem.getName().lastIndexOf("."));
// 保存(寫)
fileItem.write(new File(imgPath, imgName));
map.put("broadcastUrl", "broadcast/" + imgName);//圖片路徑
map.put("booleans", "1");//是否顯示圖片
map.put("sort", sort);//圖片路徑
map.put("dtnoticetime", PublicTools.gettime());//上傳時間
list.add(map);
}
}
}
//刪除表里面的圖片記錄
userDaoImpl.delete("delete from t_broadcast");
//往表里插入數據
userDaoImpl.insertinto(BroadcastSql.insertSql(list, strusercode));
}else{
return this.returnError(resultJson,ResMessage.Server_Abnormal.code,request);
}
} catch (Exception e){
logger.info("登錄信息異常",e);
return this.returnError(resultJson,ResMessage.Server_Abnormal.code,request);
}
return this.response(resultJson, request);
}