上传头像-前端页面BUG优化

1.更改默认的头像大小限制

SpringMVC默认为1MB文件可以进行上传，手动的去修改SpringMVC默认上传文件的大小

方式1：

直接在配置文件中配置，在文件application.properties中进行配置

# spring.servlet.multipart.maxFileSize=10MB
# spring.servlet.multipart.maxRequestSize=10MB

方式2:

需要采用java代码的形式来设置文件的上传大小的限制.主类中进行配置，可以定义一个方法，必须使用@Bean修饰来修饰。在类的前方添加@Configration注解进行修改类。MutipartConfigElement类型。

@Configuration   //表示配置类
@SpringBootApplication
@MapperScan("com.cy.store.mapper")
public class StoreApplication {

    public static void main(String[] args) {
        SpringApplication.run(StoreApplication.class, args);
    }

    @Bean
    public MultipartConfigElement getMultipartConfigElement() {
        // 创建一个配置的工厂类对象
        MultipartConfigFactory factory = new MultipartConfigFactory();
        // DataSize dataSize = DataSize.ofMegabytes(10);
        // 设置文件最大10M，DataUnit提供5中类型B,KB,MB,GB,TB
        // 创建需要创建的对象的相关信息
        factory.setMaxFileSize(DataSize.of(10, DataUnit.MEGABYTES));
        factory.setMaxRequestSize(DataSize.of(10, DataUnit.MEGABYTES));
        // 设置总上传数据总大小10M
        // 通过工厂类类创建MultipartConfigElement对象
        return factory.createMultipartConfig();
    }
}

2.显示头像

在页面中通过ajax请求来提交文件，提交完成后返回了json串，解析出data中的数据，设置到img头像标签的src属性上就可以了

~serialize():可以将表单数据自动拼接成key=value的结构进行提交给服务器，一般提交是普通的控件类型的数据(text\password\radio\checkbox)等等。

~FormData类：将表单中数据保持原有的结构进行数据的条件。
new FormData($("#form")[0])；//文件类型的数据可以使用FormData对象进行存储
~ajax默认处理数据时按照字符串的形式进行处理，以及默认会采用字符串的形式进行提交数据。

3.登录后显示头像

可以更新头像成功后，将服务器返回的头像路径保存在客户端cookie对象，然后每次检测到用户打开上传头像页面。在这个页面中通过ready()方法来自动检测去读取cookie中头像并设到src属性上。
1.设置cookie中的值：
导入cookie.js文件

<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript"
 charset="utf-8"></script>

调用cookie方法

$.cookie(key,value,time);//单位为天

2.在upload.html页面先引入cookie.js文件

<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" 
charset="utf-8"></script>

3.在upload.html页面通过ready()自动读取cookie中的数据

$(document).ready(function () {
				console.log("cookie中的avatar=" + $.cookie("avatar"));
				//将cookie值获取出来设置到头像的src属性上
				$("#img-avatar").attr("src", $.cookie("avatar"));
			});

4.显示最新的头像

在更改完头像后，将最新的头像地址，再次保存到cooike中，同名保存会覆盖有cooike中的值

$.cookie("avatar", json.data, {expires: 7});