修改头像上传至七牛云Java实现

目录

李客户端上传

在七牛云上开两个空间

配置.properties文件

编写UserController.java

构建setting.js

编写setting.html

测试

这里是CS大白话专场，让枯燥的学习变得有趣！

没有对象不要怕，我们new一个出来，每天对ta说不尽情话！

好记性不如烂键盘，自己总结不如收藏别人！

改了一天终于改好了这个模块，记录下头像上传七牛云的步骤以及一些坑。

采用的是客户端上传，也就是先向业务服务器申请上传凭证，使用上传凭证上传图片到云服务器。也可以服务器直传，客户端将文件传给业务服务器，由业务服务器直接上传图片云服务器。

李客户端上传

在七牛云上开两个空间

P.S.虽然只用到了一个，但配置要两个，咱也不知道为啥！然后权限要公开！私有的话上传完也显示不出来！！这两点真的哭死我！！

配置.properties文件

在个人中心的密钥管理获取access（AK）和secret（SK），空间概览那里获取url（测试域名）。

编写UserController.java

@Controller
@RequestMapping("/user")
public class UserController implements CommunityConstant {

    @Value("${qiniu.key.access}")
    private String accessKey;

    @Value("${qiniu.key.secret}")
    private String secretKey;

    @Value("${qiniu.bucket.header.name}")
    private String headerBucketName;

    @Value("${qiniu.bucket.header.url}")
    private String headerBucketUrl;
   
   
    //@GetMapping("/setting")
    @RequestMapping(path = "/setting",method = RequestMethod.GET)
    public String getSettingPage(Model model) {
        // 生成上传文件的名称
        String fileName = CommunityUtil.generateUUID();

        // 设置响应信息(qiniu 的规定写法)
        StringMap policy = new StringMap();
        policy.put("returnBody", CommunityUtil.getJSONString(0));
        // 生成上传到 qiniu 的凭证(qiniu 的规定写法)
        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";
    }

    
    //@PostMapping("/header/url")
    @RequestMapping(path = "/header/url",method = RequestMethod.POST)
    @ResponseBody
    public String updateHeaderUrl(String fileName) {
        if (StringUtils.isBlank(fileName)) {
            return CommunityUtil.getJSONString(1, "文件名不能为空");
        }

        // 文件在云服务器上的的访问路径
        String url = headerBucketUrl + "/" + fileName;
        userService.updateHeader(hostHolder.getUser().getId(), url);

        return CommunityUtil.getJSONString(0, "成功");

    }

}

构建setting.js

$(function () {
   // 点击表单 uploadForm 的点击按钮时，触发 upload 函数
   $("#uploadForm").submit(upload);
});

function upload() {
    $.ajax({
        url: "http://upload.qiniup.com",
        method: "post",
        processData: false, // 不要把表单内容转换成字符串
        contentType: false, // 不要 Jquery 自动设置上传的类型
        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; // 表示事件到此为止，不要再提交表单了了
}

编写setting.html

				
上传头像
				

					
						选择头像:
						
							
								
								
								
								选择一张图片
								
							
						
					
					
						
						
							立即上传
						
					
				

测试

成功上传！ 

 正常显示！