在设置中,更换头像,上传到七牛云,并显示新头像。
controller:
@LoginRequired
@GetMapping("/setting")
public String getSettingPage(Model model) {
// 上传文件名称
String fileName = CommunityUtil.generateUUID();
// 设置响应信息
StringMap policy = new StringMap();
policy.put("returnBody", CommunityUtil.getJSONString(0));
// 生成上传凭证
Auth auth = Auth.create(accessKey, secretKey);
String uploadToken = auth.uploadToken(headerBucketName, fileName, 3600, policy);
model.addAttribute("uploadToken", uploadToken);
model.addAttribute("fileName", fileName);
return "site/setting";
}
前端:单击表单提交时,由JQuery异步将数据按照设置信息传给云服务器(即客户端上传到云服务器)。上传成功会更新图像路径
js:
$(function () {
$("#uploadForm").submit(upload);
$("#forgetForm").submit(forget);
});
function upload() {
$.ajax({
url:
"http://up-z1.qiniup.com",
method:
"post",
processData:
false,
contentType:
false,
data:
new FormData($("#uploadForm")[0]),
success: function (data) {
if (data && data.code == 0) {
// 更新头像路径
$.post(
CONTEXT_PATH + "/user/header/url",
{"fileName": $("input[name='key']").val()},
function (data) {
data = $.parseJSON(data);
if (data.code == 0) {
window.location.reload();
} else {
alert(data.msg);
}
}
);
} else {
alert("上传失败!");
}
}
})
;
return false;
}
数据库中更新头像路径:
@PostMapping("/header/url")
@ResponseBody
public String updateHeaderUrl(String fileName) {
if (StringUtils.isBlank(fileName)) {
return CommunityUtil.getJSONString(1, "文件名不能为空");
}
String url = headerBucketUrl + "/" + fileName;
int id = hostHolder.getUser().getId();
userService.updateHeader(hostHolder.getUser().getId(), url);
return CommunityUtil.getJSONString(0);
}
版权声明:本文为nice___amusin原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。