前后端实现上传图片功能（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);
}