html代码:
<div class="filePic">
<input type="file" class="inputPic" @change="upload" name="profilePhoto" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*" >
<img class="am-circle am-img-thumbnail" src="images/getAvatar.do.jpg" alt="" v-if="member.photo == ''" />
<img class="am-circle am-img-thumbnail" :src="'../' + profilePhoto" alt="" v-else />
</div>
script(vue)代码:
let app = new Vue({
el: "#app",
data:{
member:{},
profilePhoto:''
},
methods: {
upload: function(e) {
this.selectedFile = e.target.files[0];
const formData = new FormData();
formData.append('profilePhoto', this.selectedFile);
axios.post("/member/upload", formData).then(rt => {
if (rt.status == 200 && rt.data.code == 200) {
this.profilePhoto = rt.data.data;
alert("修改头像成功");
}else {
alert("修改头像失败,请稍后重试....");
}
})
}
}
});
后端代码:
控制层代码:
@PostMapping("/member/upload")
public Map<String, Object> upload(@RequestParam("profilePhoto") MultipartFile profilePhoto, HttpSession session) {
MemberInfo member = (MemberInfo) session.getAttribute("currentLoginMemberInfo");
Long mno = member.getMno();
String savePath = ""; // 头像保存的路径
File dest = null;
if (profilePhoto != null && profilePhoto.getSize() > 0) {
try {
savePath = "fruitmall_files" + "/" + "member" + "/" + System.currentTimeMillis() + "_" + profilePhoto.getOriginalFilename();
dest = new File("D:/", savePath);
profilePhoto.transferTo(dest); // 上传头像
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
Map<String, Object> map = new HashMap<String, Object>();
map.put("mno", mno);
map.put("photo", savePath);
Map<String, Object> resultVO = new HashMap<String, Object>(); // 创建map对象传回前端进行响应
int result = memberInfoService.upload(map); // 转服务层执行查询语句得到返回值
if (result == -1) { // 查询语句未执行成功
resultVO.put("code", 500);
resultVO.put("msg", "数据错误");
return resultVO;
} else { // 查询语句执行成功
// 将头像存入session
member.setPhoto(savePath);
session.setAttribute("currentLoginMemberInfo", member);
resultVO.put("code", 200);
resultVO.put("msg", "上传头像成功");
resultVO.put("data", savePath);
return resultVO;
}
}
服务层代码:
@Override
public int upload(Map<String, Object> map) {
if (StringUtil.checkNull(map.get("mno"), map.get("photo"))) {
return -1;
}
return memberInfoMapper.upload(map);
}
mapper层查询语句:
<update id="upload" parameterType="map">
update memberinfo set photo=#{photo} where mno=#{mno}
</update>
StringUtil工具代码:
public class StringUtil {
public static boolean checkNull(String ... strs) {
if (strs == null || strs.length <= 0) {
return true;
}
for (String str : strs) {
if(str == null || "".equals(str)) {
return true;
}
}
return false;
}
public static boolean checkNull(Object ... objs) {
if (objs == null || objs.length <= 0) {
return true;
}
for (Object obj : objs) {
if(obj == null || "".equals(obj)) {
return true;
}
}
return false;
}
}