vue 更换头像

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


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


下图3是html代码:


vue 更换头像_第1张图片
图3 上传图片的html

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

图4 input上传


vue 更换头像_第2张图片
图5 上传文件效果图

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


vue 更换头像_第3张图片
图6 css代码

点击图片,触发函数onFileChange,函数如图7显示:


vue 更换头像_第4张图片
图7

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


vue 更换头像_第5张图片
图8

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


vue 更换头像_第6张图片
图9

是不是很简单~~~~


你可能感兴趣的:(vue 更换头像)