因为前段时间公司做了一个点餐系统，其中有一个需求是头像更换，也就是前端常说的图片上传功能，出于考虑，该功能并没有使用插件，而是决定自己写，效果如下图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
是不是很简单~~~~
网友评论