3. Upload the avatar to qiniu cloud and display it

In settings , change the avatar , Upload to qiniuyun , And display a new avatar .

controller：

@LoginRequired
    @GetMapping("/setting")
    public String getSettingPage(Model model) {
    
        //  Upload file name 
        String fileName = CommunityUtil.generateUUID();
        //  Set response information 
        StringMap policy = new StringMap();
        policy.put("returnBody", CommunityUtil.getJSONString(0));
        //  Generate upload credentials 
        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";
    }

front end ： When you click Submit Form , from JQuery Asynchronously transmit the data to the ECS according to the setting information （ That is, the client uploads to the ECS ）. Uploading successfully will update the image path
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) {
    
                //  Update avatar path 
                $.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(" Upload failed ！");
            }
        }

    })
    ;
    return false;
}

Update the avatar path in the database ：

@PostMapping("/header/url")
    @ResponseBody
    public String updateHeaderUrl(String fileName) {
    
        if (StringUtils.isBlank(fileName)) {
    
            return CommunityUtil.getJSONString(1, " File name cannot be empty ");
        }
        String url = headerBucketUrl + "/" + fileName;
        int id = hostHolder.getUser().getId();
        userService.updateHeader(hostHolder.getUser().getId(), url);
        return CommunityUtil.getJSONString(0);
    }