vue实现上传修改头像图片(带后端代码,mvc)

最新推荐文章于 2026-04-03 10:08:42 发布

原创最新推荐文章于 2026-04-03 10:08:42 发布 · 1.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

文章描述了一个使用HTML、Vue.js和axios实现的头像上传功能，用户选择图片后，通过POST请求发送到后端。后端接收到文件，保存到服务器，并更新数据库中用户的头像信息。整个流程涉及前端的数据绑定、事件处理和后端的文件存储及数据库操作。

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;
	}

}