因为前段时间公司做了一个点餐系统，其中有一个需求是头像更换，也就是前端常说的图片上传功能，出于考虑，该功能并没有使用插件，而是决定自己写，效果如下图1

图1的效果示意图1将文件夹放在录屏文件下可能会把图片弄绿，所以我准备了另一张效果示意图，如图2：

下图3是html代码：

图3 上传图片的html

上传头像一般都是用 input标签，如图4，这个标签的样式也是非常ugly，如图5，点击选择文件，可以挑选你需要上传的文件或图片。 

图4 input上传

图5 上传文件效果图

一般这么丑的UI是不可能放到正式项目中的，所以，接下来我们用CSS来更改原有的样式，如图6，让input绝对定位到img图片上，只要点击图片就会触发input来选择文件上传。这样子UI就好看多了~·

图6 css代码

点击图片，触发函数onFileChange，函数如图7显示：

图7

限制了图片的大小及格式，大小不能超过100kb，只支持jpg、jpeg 和 png图片，如果符合，则触发createImage函数，如图8。

图8

createImage只是将接口所需的数据整合在一起，这个数据就是this.formData。在选好图片后，点击提交按钮，直接将this.formData发送给接口，接口传回是否已经上传成功的提示，如图9。

图9

是不是很简单~~~~